今天在做一个原本使用2.0的 extend 全局API 来实现的功能时,浏览器却提示 extend 不是一个函数,查了官方文档才知道这个已经被废除了:
但实际createApp是用来创建应用实例的,这样做会丢失上下文,实际尝试了一下确实也能渲染出组件但上下文丢失了就比较麻烦了。
重新寻找方案的时候在vue的issue中发现有人在讨论着这个问题:
ISSUEhttps://github.com/vuejs/vue-next/issues/2097
VUE作者也参与了问答,根据里面几个哥们的说法,我们重新实现一下:
// 需要使用createVNode和render方法
import {createVNode, render} from "vue"
// 需要引用的组件,这个根据自己的需求来引用
import VueComponent from './VueComponent'
// 由于render方法需要挂载到一个已经存在的节点上,我不太想在页面放置这些节点,就使用JS来生成,如果页面中已经有节点了,这里直接穿对应节点就可以了
let node = document.getElementById('my-node')
if(!node) {
node = document.createElement('div', {id: 'my-node'})
}
// 接下来就调用方法
// 第一个参数传入一个VUE组件,第二个参数传入组件中的props或者事件
// 子组件 $emit 出来的事件也是通过第二个参数来注入监听,前面需要添加 "on"
// 比如子组件 $emit("create") 时,这里就要传入 “onCreate” 来监听
let instance = createVNode(VueComponent, {
name: 'v神',
onCreate: (event) => {
console.log(event)
}
})
// 这句话比较重要,将原本应用程序的上下文覆盖过来
// 这里用到的app就是在入口文件里通过createApp方法创建的应用程序实例
instance.appContext = app._context
// 使用render方法渲染组件
render(instance, node)
console.log(instance)
// 返回HTML
return instance.el
这么写起来始终感觉不是很优雅的样子,不知道还有没有其它办法