挂载 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

目前，我们正在使用上述方法通过 append

在我们的遗留应用程序中附加 VUE 组件

我想在 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);

希望对您有所帮助，问候！

Answer 2

为了以后的访问者节省一些时间，我在搜索相同的答案时发现了一个插件，它完全符合 Luis 在 https://github.com/pearofducks/mount-vue-component

中解释的答案

使其更易于实施。

Answer 3

创建一个新的 vue3 应用程序并直接挂载到 DOM 很容易，

    const appDef = {
        data() {
            return {title: 'hello world'};
        },
        template: '<div>title is: {{title}}</div>',
    }

    var el = document.createElement('div');//create container for the app

    const app = Vue.createApp(appDef);
    app.mount(el);//mount to DOM
    
    //el: DOM element to be appended
    console.log(el.innerHTML);//title is: hello world

挂载 vue 组件 - Vue 3

Mount vue component - Vue 3

vue.js

vuejs3