时间戳

首页 > 解决方案 > 在动态组件中仅安装一次触发器

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

问题描述

在我的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);
    }
  }  
}

然后在Details组件上

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

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

Mount Dynamic Component

和

This component has been mounted

标签： javascriptvue.jsvuejs2

解决方案

您可以在您的 vuex 状态中定义一个数字变量（即dynamicComponentKey），它将作为key动态组件工作，并在您的SET_DYNAMIC_COMPONENT突变中增加它。

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

然后，在您的 App.vue 中：

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

推荐阅读