Vue.js 当从父组件动态更改子组件时，在子组件中调用方法

我有一个简单的组件层次结构，其中有一个父组件，包含以下模板

和两个子组件，它们通过

当前值动态“切换”出来

组件“切换”的逻辑正在父组件中处理。但是，当我试图通过
挂载的
生命周期挂钩在第二个子组件中执行一个方法（响应第一个子组件发出的事件，在父组件中被监听，并更改父组件中当前

的值）时，没有观察到预期的结果

本质上，当一个子组件作为父组件中的当前组件“切换”进来时，我找不到一种合适的方法来调用该子组件的方法

我实际考虑过在实例上使用

$refs

和

$children

属性，但这些似乎没有任何帮助。我还使用事件系统进行了推理。我通常在

挂载的

生命周期钩子中“定义”事件侦听器，但是，我指的是使用生命周期钩子的“问题”

---

处理这种情况的通常方法是什么

对于作为“当前”子组件调用方法的子组件，可以立即想到两个选项：

1） 使用

挂载的

生命周期挂钩。为了使其正常工作，必须使用

v-if

，以便有条件地显示子组件，否则子组件将不会触发

挂载的

生命周期挂钩。否则，如果您使用

v-show

或其他某种机制有条件地显示子组件，则

挂载的

挂钩将只触发一次

2） 使用监视的属性。代替上述操作，您可以执行以下操作：

<child-component :target_prop="current"></child-component>

Vue.component('child-component', {
    . . .,
    props: ['target_prop'],
    watch: {
        target_prop: function() {
            if(this.target_prop == your_expected_value) {
                //execute the desired method for this component
            }
        }
    }
});

Vue.component（‘子组件’{
. . .,
道具：['target_prop']，
观察：{
target_prop:function（）{
if（this.target\u prop==您的\u期望值）{
//为此组件执行所需的方法
}
}
}
});

当然，这只是一个概念验证的例子，有很多替代方法可以让您更好地使用所关注的属性

我也听说过使用“总线”来处理组件间通信，但我不相信它会比上述两种解决方案更好（而且可能更糟）

---

就我个人而言，我更喜欢

mounted

lifecycle钩子方法，尽管有一条警告，即在子组件之间切换时，子组件中的任何“设置”或数据都将丢失（尽管您也可以在销毁时发出设置对象，并根据需要存储/恢复这些设置，但这可能会变得混乱）。你必须做出最终判断，哪种方法更适合你的需要，哪种后果你更容易处理。

非常好。非常感谢。我在观看道具时遇到了一些麻烦，我不确定为什么。然而，我发现一个“生命周期”挂钩-

激活了

，这正是我想要的。当一个组件从

非活动

变为

活动

时，似乎调用了

已激活

，这种行为在“切换”组件时观察到，即

：是组件的

属性。