《Vue2 进阶知识》动态挂载组件之Vue.extend + vm.$mount

news2024/11/23 3:29:32

前言

目前工作还是以 Vue2 为主，今早有人提问 如何动态挂载组件？ 话说很久很久以前就实现过，今天再详细的整理一下此问题！

开始

动态组件如下，是个简单的例子：

但请注意这里给了个 id="test2"；
可传入 props 参数 name ；

// 文件名 AComponents.vue
<template>
    <h1 id="test2">这是 A 组件.{{name}}</h1>
</template>
<script>
export default {
    props: {
        name: {
            type: String,
            default: ''
        }
    }
}
</script>

重点来了：

方法 addNode 创建节点；
方法 extendComponent 挂载组件，使用全局 API Vue.extend 和实例方法vm.$mount ；
方法 destoryComponent 销毁组件，注意是寻找 id 为 test2，因为 test 已被替换；

<template>
	<div class="extend-main">
		<button @click="addNode">创建节点</button>
		<button @click="extendComponent">挂载组件</button>
		<button @click="destoryComponent">销毁组件</button>
	</div>
</template>
<script>
import Vue from 'vue'
import AComponents from './../components/AComponents.vue'
export default {
    methods: {
        // 创建节点
        addNode() {
            // body 最后创建一个 id 为 test 节点
            const divEl = document.createElement('div');
            divEl.id = 'test';
            document.body.appendChild(divEl);
        },
        // 挂载组件
        extendComponent() {
            // 使用基础 Vue 构造器，创建一个“子类”
            const AComponentsEx = Vue.extend(AComponents);
            // 创建实例，并挂载到指定 id 上
            const aComponents = new AComponentsEx().$mount('#test');
            // 可传入 props 值
            aComponents.$props.name = '这是一个测试！';
        },
        // 销毁组件
        destoryComponent() {
            // 注意此时没有 id 为 test 的节点，已被 id test2 替换
            const testEl = document.getElementById('test2');
            document.body.removeChild(testEl); 
        }
    }
}
</script>