无法安装两次相同的 Vue 3 组件

Question

我在框架加载期间将 Vue 3 组件安装为加载动画：

createApp(App).mount(e);

加载框架时，框架内容会在 html 中删除组件（但我猜不是 Vue）。此行为由 Vue 的外部系统管理。

当我尝试使用同一命令重新加载组件时，组件未显示。

如果我只重新挂载该组件，我会在控制台中看到以下警告并且该组件不会显示：

"[Vue warn]: App has already been mounted.
If you want to remount the same app, move your app creation logic into a factory function and create fresh app instances for each mount - e.g. `const createMyApp = () => createApp(App)`".

我还找到了一种方法来复制问题：

const app = createApp(App)
app.mount(el);
el.innerHtml = '';
app.mount(el);

我也尝试卸载组件但没有成功:

const app = createApp(App);
app.mount(el);
app.unmount();
app.mount(el);

那么在外部擦除同一个vue组件时，正确的显示方式是什么？

Answer 1

要mount/unmount2个Vue实例，需要使用render方法

因此，例如下面的示例，此解决方案有效：

var app = createApp({ render: () => h(App) })
app.mount(el);
el.innerHtml = '';
app = createApp({ render: () => h(App) })
app.mount(el);

不要忘记导入 h() 函数：

import { createApp, h } from 'vue';

Answer 2

更好的选择是使用 Vue custom elements。

首先，创建一个扩展名为 ce.vue 的经典 SFC :

//test.ce.vue
<template>
    <div class="text-primary">Test</div>
</template>

<script>
export default {
    name: 'test',
};
</script>

<style>
    .text-primary {
        color: red;
    }

</style>

然后在主脚本中：

//app.js
import Test from 'test.ce.vue';
const testElement = defineCustomElement(Test);
customElements.define('test-element', testElement);

document.body.appendChild(document.createElement('test-element'));

一旦在文档中检测到该组件，就会立即呈现该组件：

<test-component>
    #shadow-root (open)
        <style>
            .text-primary {
                color: red;
            }
        </style>
        <div class="text-primary">Test</div>
</test-component>

无法安装两次相同的 Vue 3 组件

Cannont mount twice the same Vue 3 component

mount

vuejs3