看ElementPlus源码(Elmessage)学习到了很重要的一点:
vue3中可以使用createNode
的方式创建虚拟节点,再通过render函数挂载,类似createApp,但这样使用有一个好处,可以共享同一个App实例上下文,比如说我有一个组件comp,引入了Elementplus中的button组件,再其他组件中通过createvnode的方式动态加载,只需要再创建后的vnode节点上挂载上appcontext即可。
vue
<!-- app.vue -->
<script setup>
import { ref, createVNode, render, getCurrentInstance } from 'vue'
import comp from './Comp.vue'
const msg = ref('Hello World!')
const appContext = getCurrentInstance().appContext
function createBtn(text) {
const container = document.createElement('div')
const vnode = createVNode(comp, {
a: msg
})
vnode.appContext = appContext
render(vnode, container)
document.getElementById('app').appendChild(container)
}
</script>
<template>
<div id="app"></div>
<h1>{{ msg }}</h1>
<input v-model="msg" />
<el-button @click="createBtn('node')">byn</el-button>
</template>
动态创建的组件:
vue
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
a: {
type: String
}
})
</script>
<template>
<el-button >
{{a}}
</el-button>
</template>