Vuejs2 Vue手动安装&；重新安装组件

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

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

---

如果您的目标是动态地在组件之间进行更改，则可以使用来构建动态组件。这样，您就不需要使用

v-if

s来控制必须渲染哪个组件

我还非常确定，您不应该在组件内部

$mount

，我认为这会导致一些副作用，通常不是好的做法，因为至少还有其他方法可以做到这一点

---

关于混合Vuetify和香草HTML，基本上没有问题。Vuetify的一些选择器非常具体（比如在v-card的v-dialog中使用可滚动的），但大多数更通用。

谢谢，

工作得非常好。我仍然不太明白为什么手动安装组件是件坏事。这可能与Vue背后的核心设计思想有关。类似于：Vue是关于自定义标记的，而不是回归到jQuery样式的组件创建，如

$（''）.append（…）

days。无论如何，我将用工作代码编辑我的答案。再次感谢兄弟。

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