Question

在我的pip 19.1.1 from c:\users\ymodak\appdata\local\programs\python\python37-32\lib\site-packages\pip (python 3.7)

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

App.vue

然后在我的<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

Answer 1

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

这将在密钥更改时强制重新安装组件。

然后，在您的App.vue中：

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

Answer 2

我设法通过使用更新的生命周期而不是挂载的生命周期来解决此问题。

在Details组件

export default {
  updated() {
    if (this.$store.getters.dynamicComponent) {
      console.log('This component has been mounted');
    }
  }
}

@fabruex解决方案也可以使用，但就我而言，我宁愿不要仅在vuex中为密钥定义另一个状态。

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

2 个答案: