Vue动态创建注册component的实例代码

来源：测品娱乐

那我们是否可以通过这种方式来达到我们的需求呢？

还不够！

为什么？？？

因为 Vue.component 返回的结果是一个 function！它返回的并不是组件实例，而是一个构造函数。

那到这里其实我们就清楚了。对于 Vue.component 声明的组件，我们先通过 Vue.component 获取它的构造函数，再 new 出一个组件实例，最后通过 $mount 挂载到 html 上。

// 定义一个名为 button-counter 全局注册的组件
Vue.component("button-counter", {
 template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
 data() {
 return {
 count: 0
 }
 }
});

new Vue({
 template: `
 <div id="app">
 <h1>App Component</h1>
 <button @click="insert">click to insert button-counter comonent</button>
 <div id="insert-container"></div>
 </div>
 `,
 methods: {
 insert() {
 const ButtonCounter = Vue.component("button-counter"); // 只能查找到全局注册到组件
 const instance = new ButtonCounter();
 instance.$mount("#insert-container");
 }
 }
}).$mount("#app");

上述代码中，Vue.component 先获取到组件的构造函数，然后构造实例，通过实例的一些方法来处理数据和挂载节点。

但是我们发现 Vue.component 只负责全局注册或查找。

如果想要针对局部注册的组件使用动态创建并添加我们需要使用 Vue.extend 基础Vue构造器创建"子类"达到目的。

其实 Vue.component 方法传入的选项是一个对象时，Vue自动调用 Vue.extend。

完整代码示例：

const ButtonCounterComponent = {
 template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
 data() {
 return {
 count: 0
 }
 }
};

new Vue({
 template: `
 <div id="app">
 <h1>App Component</h1>
 <button @click="insert">click to insert button-counter comonent</button>
 <div id="insert-container"></div>
 </div>
 `,
 methods: {
 insert() {
 const ButtonCounter = Vue.extend(ButtonCounterComponent);
 const instance = new ButtonCounter();
 instance.$mount("#insert-container");
 }
 }
}).$mount("#app");

单文件应用

在实际使用场景里，大部分都是用脚手架构建到项目，使用 *.vue 这种单文件方式注册组件。

<template></template>
<script>
export default {
 data() {
 return {
 msg: "hello"
 }
 },
 created() {},
 mounted() {},
 destroy() {}
};
</script>
<style scoped></style>

import *.vue 返回的就是模版中 script 中 export 部分。

总结

至此，我们知道了，全局组件动态注册和局部组件动态注册的使用方法和注意事项，我们可以结合实际情况去选择不同方案进行搭配即可。

好了，

显示全文

全部频道

Vue动态创建注册component的实例代码