安装VUE组件-VUE 3

沃梦达教程前端问题

2022-01-01

Mount vue component - Vue 3(安装VUE组件-VUE 3)

本文介绍了安装VUE组件-VUE 3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在第3版中执行此操作

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

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

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

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

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

提前谢谢

推荐答案

我找到了我答案的解决方案，在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实例
销毁：销毁组件

这是挂载要直接附加到DOM的VUE 3组件的方法，使用方法如下：

// main.js

import { mount } from 'mount.js'

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

$element.html(el);

希望对您有所帮助，致敬！

这篇关于安装VUE组件-VUE 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：安装VUE组件-VUE 3