我找到了答案的解决方案,在 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);
希望有帮助,问候!