在项目的开发过程中「动态添加标签」，「动态添加属性」，「或者动态添加关键词」，是我们在项目中经常遇到的一个场景。
最近在做项目时，就遇到了动态添加属性的案例。
通常在单文件组件的开发模式中，我们会以如下的方式创建组件。
然后在需要的地方引入使用即可。
操作数据的方式
比如我们实现一个动态添加搜索关键词的案例，通常的方式会通过循环组件然后处理数据的方式。
很简单方便的可以实现这个功能，但这种实现方式有时候不够灵活，只能把模版放在既定的位置。
如果我们想随时随地（任何容器）的创建组件该如何呢？这就是下面我们需要说的「编程式」创建组件。
今天就来说说如何利用「编程式」创建组件的方式去实现动态加载组件。
编程式创建组件在说「编程式」之前，先来熟悉几个API。
-
Vue.extend()：可以创建一个“子类”。参数是一个包含组件选项的对象。
-
propsData：创建实例时传递的 props，只用于 new 创建的实例中。
-
$mount()：
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
如果没有提供参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
例如：
// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)
熟悉之后，我们就来看看如何使用编程式添加组件。
我们可以看到，通过上面的实现之后，我们可以通过「$refs」属性把组件添加到任何的容器中，而且我们可以通过 Javascript 编程的方式随时添加。
是不是很酷，小伙伴赶紧去试试吧。
如果文章对你有启发，记得给个赞哦。
公众号：六小登登，更多干货文章。
人人都可以成为高手。一个爱写作的技术人。欢迎交流。
