在项目的开发过程中「动态添加标签」，「动态添加属性」，「或者动态添加关键词」，是我们在项目中经常遇到的一个场景。
最近在做项目时，就遇到了动态添加属性的案例。
通常在单文件组件的开发模式中，我们会以如下的方式创建组件。
<template>
<span></span>
</template>
<script>
export default {
name: "Tag"
};
</script>
然后在需要的地方引入使用即可。
<template>
<div id="app">
<tag></tag>
</div>
</template>
<script>
import Tag from "./components/Tag";
export default {
name: "app",
components: { Tag }
};
</script>
操作数据的方式
比如我们实现一个动态添加搜索关键词的案例，通常的方式会通过循环组件然后处理数据的方式。
<template>
<div id="app">
<base-input v-for="item in keywords" :key="item.id" v-model="item.name"></base-input>
<button class="add-btn" @click="addKeyWords">添加关键词</button>
</div>
</template>
<script>
import BaseInput from "./components/BaseInput";
export default {
name: "app",
components: { BaseInput },
data() {
return {
keywords: []
};
},
methods: {
addKeyWords() {
this.keywords.push({
name: ""
});
}
}
};
</script>
很简单方便的可以实现这个功能，但这种实现方式有时候不够灵活，只能把模版放在既定的位置。
如果我们想随时随地（任何容器）的创建组件该如何呢？这就是下面我们需要说的「编程式」创建组件。
今天就来说说如何利用「编程式」创建组件的方式去实现动态加载组件。
编程式创建组件
在说「编程式」之前，先来熟悉几个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)
熟悉之后，我们就来看看如何使用编程式添加组件。
<template>
<div id="app">
<button class="add-btn" @click="addKeyWords">添加关键词</button>
<div ref="container" class="container"></div>
</div>
</template>
<script>
import Vue from "vue";
import BaseInput from "./components/BaseInput";
export default {
name: "app",
methods: {
addKeyWords() {
var ComponentInput = Vue.extend(BaseInput);
var vm = new ComponentInput({
propsData: { value: "996" }
});
vm.$mount();
this.$refs.container.appendChild(vm.$el);
}
}
};
</script>
我们可以看到，通过上面的实现之后，我们可以通过「$refs」属性把组件添加到任何的容器中，而且我们可以通过 JavaScript 编程的方式随时添加。
是不是很酷，小伙伴赶紧去试试吧。
如果文章对你有启发，记得给个赞哦。
公众号：六小登登，更多干货文章。
