如何为组件的每个实例触发 vue 生命周期事件？

Posted 2023-02-23

【中文标题】如何为组件的每个实例触发 vue 生命周期事件？

【英文标题】：How to fire vue lifecycle-events for every instance of a component?

【发布时间】：2019-10-15 02:54:33

【问题描述】：

我有一个由同一个子组件的多个实例组成的 vue 组件。其中一些子组件仅在条件下显示。我的问题是，当 if 条件变为 false 时，被破坏的方法和 beforeDestroy 方法都只调用一次（对于要销毁的最后一个子组件），但不是每个已安装的子组件。有没有办法改变这种行为并实现为每个被销毁的实例调用destroy-method？

为了更好地理解，我创建了一个小提琴：当从“前提条件 1”切换到“前提条件 2”时，我希望“实例 1”和“实例 2”的销毁方法都会被触发。但控制台仅显示执行实例 2 的方法。 当切换回“前提条件 1”时，根本没有销毁事件冒泡，但我希望它会被调用，例如 3。

Here is the fiddle:
https://jsfiddle.net/5chq02zs/2/

我也尝试将“destroyed”更改为“beforeDestroy”或“deactivate”，但结果保持不变。谁能指出我正确的方向？谢谢。

【参考方案1】：

将key="id" 添加到元素中。

    <my-component v-if="picked == 'true'" id="1" :key="1">
      instance 1
    </my-component>
    <my-component v-if="picked == 'true'" id="2" :key="2">
      instance 2
    </my-component>
    <my-component v-if="picked == 'false'" id="3" :key="3">
      instance 3
    </my-component>

【讨论】：

真的吗？非常感谢，我已经用谷歌搜索了好几个小时......

我也有过一天 ;-) 祝你好运！