挂载 vue 组件 - Vue 3

Question

我想在 Vue 3 中这样做

new ComponentName({ 
  propsData: {
    title: 'hello world',
  }
}).$mount();

但我收到这个错误：VueComponents_component_name__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor

目前，我们正在使用上述方法通过以下方式在我们的旧应用程序中附加 VUE 组件：append

我想在 VUE 3 上做同样的事情，但我还没有找到方法

提前致谢

Answer 1

我找到了答案的解决方案，在 vue 3（vue 项目之外）中安装 vue 组件与 vue 2 不同，这是方法：

// mount.js

import { createVNode, render } from 'vue'

export const mount = (component, { props, children, element, app } = {}) => {
    let el = element

    let vNode = createVNode(component, props, children)
    if (app && app._context) vNode.appContext = app._context
    if (el) render(vNode, el)
    else if (typeof document !== 'undefined' ) render(vNode, el = document.createElement('div'))

    const destroy = () => {
        if (el) render(null, el)
        el = null
        vNode = null
    }

    return { vNode, destroy, el }
}

• el：要追加的 DOM 元素
• vNode：Vue实例
• destroy：销毁组件

这是挂载 vue 3 组件并直接附加到 DOM 的方法，可以如下使用：

// main.js

import { mount } from 'mount.js'

const { el, vNode, destroy } = mount(MyVueComponents,
      {
          props: {
            fields,
            labels,
            options
           },
           app: MyVueApp
      },
)

$element.html(el);

希望有帮助，问候！