javascript - 在动态组件中仅安装一次触发器

Question

在我的App.vue

我正在使用动态组件来渲染来自 Vuex 的动态组件

<component :is="$store.getters.getDynamicComponent"></component>

然后在我的Home.vue

<v-card @click="showDetails">
  <v-card-title primary-title>
     <div class="mb-0 text-truncate"> {{name}} </div>
  </v-card-title>
</v-card>

import Details from '@/components/UI/Details';

export default {
  name: 'Home',
  methods: {
    showDetails() {
      console.log('Mount Dynamic Component');
      this.$store.commit('SET_DYNAMIC_COMPONENT', Details);
    }
  }  
}

然后在详细信息组件上

export default {
  name: 'Details',
  mounted: {
    console.log('This component has been mounted');
  }
}

当我点击Home.vue中的卡片时，安装的生命周期仅触发一次 我希望每次点击卡片时它都会打印

挂载动态组件

和

该组件已安装

Answer 1

您可以在 vuex 状态中定义一个数字变量(即 dynamicComponentKey)，它将用作动态组件的 key，并在 SET_DYNAMIC_COMPONENT 中递增它 突变。

当 key 发生变化时，这应该强制重新安装组件。

然后，在您的 App.vue 中:

<component :is="$store.getters.getDynamicComponent" :key="$store.getters.getDynamicComponentKey"></component>