Skip to content

看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>