Vue3 在自定义指令中渲染组件

Question

我正在尝试将条件渲染指令从 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)
})
}

但在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

  }
})

Answer 1

使用createApp新的 Vue 应用程序来安装元素似乎可行

const app = createApp(App)
app.directive('tooltip', {
  mounted (el: HTMLElement, _, vnode) {
    let newElement = h('div', { class: 'tooltip' }, [
      h('div', { class: 'tooltip__icon' }),
      h(vnode),
      'message'
    ])
    createApp(newElement).mount(el)
  }
})