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 }
}

appended

• vNode：

• el: DOM元素为 Vue instance
• 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

为了节省一些时间，我正在寻找同样的答案，并找到了一个插件，这正是路易斯在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