这篇文章主要介绍Vue结合原生js如何实现自定义组件自动生成，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联建站提供成都网站建设、成都做网站、网页设计，品牌网站设计，广告投放等致力于企业网站建设与公司网站制作，10年的网站开发和建站经验,助力企业信息化建设，成功案例突破上千余家,是您实现网站建设的好选择.

就目前三大前端主流数据驱动框架（vue,ng,react）而言，均具有创建自定义组件的api，但都是必须先做到事先写好挂载点，这个挂载点可以是原有静态元素标签也可以是自定义模板；对于多种组件通过同一数据流生成的，如果事先在页面上写好挂载点(mounted)，然后通过dom操作去动态添加，会遇到类似这样一条错误提示信息：Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(…)。这又是为何呢，下一步该怎么办？

原因是任何dom操作的对象必须是符合W3C标准的元素，除非如下所述的，改写生成html元素对象的原型（HTMLElement.prototype）并注册自定义元素，从而实现动态生成自定义组件的效果。

不过，大家都明白使用数据驱动框架的初衷就是尽可能避免dom操作，而如下代码中还是有一些dom操作的，就目前认知水平而言，感觉这些必要的dom操作还是避免不了的。其它不多说了，直接看代码。。。

var textTpl='';