我正在尝试将条件渲染指令从 Vue 2 迁移到 Vue 3。该指令更改了“el”的父组件,并添加了一个聚合一些逻辑的包装器元素。
在 Vue 2 版本中,该过程很简单,只需创建组件的实例,安装它,然后将指令接收器添加为子组件即可。
import EditableElement from '@/components/base/EditableElement'
Vue.directive('editable', {
bind: function (el, binding, vnode) {
let EE = Vue.extend(EditableElement)
EE.$mount()
vnode.elm = EE.$el
vnode.elm.childNodes[0].appendChild(el)
})
}
Run Code Online (Sandbox Code Playgroud)
但在Vue3中,$el属性不存在,mount()方法也不存在,我一直在尝试创建
使用 h() 函数的自定义组件,但结果给了我一个空的 el,当我尝试更改 vnode 时它不起作用。我怎样才能做到这一点?
app.directive('tooltip', {
beforeMount(el, binding, vnode) {
let new_el = h('div', { class: 'tooltip'}, [
h('div', { class: 'tooltip__icon' }),
h(vnode)
'message'
])
vnode = new_el
}
})
Run Code Online (Sandbox Code Playgroud)