Question

我有一个简单的组件层次结构，其中有一个父组件，它包含以下模板<div><component :is="current"></component></div>和两个子组件，它们是动态“切换”的。 out，通过current的值。

＆＃39;切换的逻辑＆＃39;组件正在父组件中处理。但是，当我尝试在第二个子组件中执行一个方法时（响应从第一个子组件发出的事件，在父组件中被侦听，并在父组件中更改current的值）通过mounted生命周期钩子，没有观察到预期的结果。

基本上，当该组件被切换时，我找不到一种适当的方式来调用子组件的方法＆＃39; in作为父组件中的当前组件。

我实际上已经考虑过在实例上使用$refs和$children属性，但这些似乎没有任何帮助。我也推理使用事件系统。我通常会定义＆＃39; mounted生命周期钩子中的事件监听器，但是，我指的是问题＆＃39;使用生命周期钩子

这种情况的常用方法是什么？

Answer 1

对于作为“当前”子组件调用方法的子组件，有两个选项立即浮现在脑海中：

1）使用mounted生命周期钩子。为了使其正常工作，您必须使用v-if才能有条件地显示子组件，否则子组件将不会触发mounted生命周期钩子。否则，如果您使用v-show或其他一些机制来有条件地显示子组件，mounted挂钩将只触发一次。

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
            }
        }
    }
});

当然，这只是一个概念验证示例，并且有很多替代方法可以使用受监视的属性。

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

就个人而言，我更喜欢mounted生命周期钩子方法，尽管有一点需要注意，子组件中的任何“设置”或数据在它们之间切换时都会丢失（尽管您也可以在销毁时发出设置对象）并根据需要存储/恢复这些设置，但这可能会变得混乱）。您必须最终判断哪种方法更适合您的需求以及您更愿意处理的后果。

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

1 个答案: