Vue 手动安装和重新安装组件

Question

我有以下精简的代码，可以从下拉列表中动态安装组件：

<template>
<v-app>
<v-container>
<v-layout>
<v-select label="Providers"
single-line
:items="providers"
item-text="txt"
item-value="val"
:v-model="provider"
v-on:change="setProvider" />

<div ref='provider' id='provider' />
</v-layout>
</v-container>
</v-app>
</template>
<script>
import Provider1 from './components/Provider'
import Provider2 from './components/Provider2'
import Vue from 'vue'
import vuetify from './plugins/vuetify';
export default {
data: () => {
return {
provider: null,
providers: [
{txt: 'a', val: Provider1},
{txt: 'b', val: Provider2}
],
};
},
methods: {
setProvider(val) {
console.log(this.$refs.provider);
if (this.provider) {
// unmount and/or re-create #provider dom element
}
this.provider = new (Vue.extend(val))({
vuetify,
}).$mount('#provider');
}
},
}
</script>

第一次选择效果很好，随后的选择为我的控制台窗口增添了">[Vue warn]：找不到元素：#provider"// unmount and/or re-create #provider dom element中应该放置什么？

此外，如果这些问题需要单独创建，请告诉我：

1. dom元素发生了什么？它不会像console.log(this.$refs.provider);清楚地显示的那样被替换
2. 为什么每个人都建议不要在任何地方手动安装组件？关于卸载代码的待定信息，在我看来，这种方式看起来比一堆v-if要优雅得多。(编辑：增加第3个问题(
3. 将香草标记与Vuetify的标记(如上面的<div />(混合有什么缺点吗

感谢

(编辑：修改后的工作代码。我添加了一个发射以获得额外的乐趣(

<template>
<v-app>
<v-app-bar app />
<v-main>
<v-select label="Providers"
:items="providers"
v-model="provider" />
<component :is="provider" @fb="feedback" />
</v-main>
</v-app>
</template>
<script>
import Provider1 from './components/Provider'
import Provider2 from './components/Provider2'
export default {
data: () => {
return {
provider: null,
providers: [
{text: 'a', value: Provider1},
{text: 'b', value: Provider2}
],
};
},
methods: {
feedback(v) {
alert(v);
}
}
}
</script>

Answer 1

如果您的目标是在组件之间动态更改，则可以使用isVue关键字来构建动态组件。这样就不需要使用v-if来控制必须渲染的组件。

我也很确定你不应该在组件中$mount，我认为这会引起一些副作用，而且通常不是好的做法，因为至少有其他方法可以做到这一点。

关于混合Vuetify和香草HTML，基本上没有问题。Vuetify的一些选择器非常具体(比如在带有v-card的v-对话框中使用scrollable(，但大多数选择器更通用。