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

Posted 2023-02-16

【中文标题】Vue手动安装和重新安装组件

【英文标题】：Vue manually mounting & remounting components

【发布时间】：2021-06-11 11:09:32

【问题描述】：

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

<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 警告]：找不到元素：#provider” // unmount and/or re-create #provider dom element应该放什么？

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

dom 元素会发生什么？正如console.log(this.$refs.provider); 清楚显示的那样，它不会被替换。 为什么每个人都建议不要到处手动安装组件？关于卸载代码的待处理信息，在我看来，这种方式看起来比 v-ifs 看起来更优雅。 （编辑：添加第三个问题） 将 vanilla 标记与上述 <div /> 等 Vuetify 混合使用有什么缺点吗？

谢谢

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

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

【参考方案1】：

如果您的目标是动态更改组件，您可以使用is Vue keyword 构建动态组件。这样您就不需要使用v-ifs 来控制必须渲染的组件。

我也很确定你不应该在组件内部 $mount 我相信这会导致一些副作用并且通常不是好的做法，因为至少还有其他方法可以做到这一点。

关于混合 Vuetify 和 vanilla html，那里几乎没有问题。 Vuetify 的一些选择器非常具体（例如在带有 v-card 的 v-dialog 中使用 scrollable），但大多数选择器更通用。

【讨论】：

谢谢你，<component /> 效果很好。

我仍然不明白为什么手动安装组件是一件坏事。这可能与 Vue 背后的核心设计理念有关。类似的东西：Vue 是关于自定义标记，而不是像 $('<component>', ...).append(...) 天那样回归到 jQuery 样式的组件创建。无论如何，我将使用工作代码编辑我的答案。再次感谢兄弟。