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

Posted 2023-02-23

【中文标题】当组件从父组件动态更改时调用子组件中的方法

【英文标题】：Invoke method in child component when the component is changed dynamically from the parent component

【发布时间】：2018-05-04 14:03:32

【问题描述】：

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

组件的“切换”逻辑在父组件中处理。但是，当我尝试通过mounted生命周期钩子，没有观察到预期的结果。

基本上，当子组件被“切换”为父组件中的当前组件时，我找不到调用子组件方法的合适方式。

我实际研究过在实例上使用$refs 和$childrenproperties，但这些似乎没有任何帮助。我还使用事件系统进行了推理。我通常在 mounted 生命周期钩子中“定义”一个事件监听器，但是，我指的是使用生命周期钩子的“问题”

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

【参考方案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 生命周期钩子方法，但需要注意的是，子组件中的任何“设置”或数据在它们之间切换时都会丢失（尽管您也可以在销毁和存储时发出设置对象/根据需要恢复这些设置，但这可能会变得混乱）。您必须对哪种方法更适合您的需求以及您更愿意处理哪些后果做出最终判断。

【讨论】：

优秀。谢谢！

我在观看道具时遇到了一些麻烦，我不确定为什么。然而，我发现了一个“生命周期”钩子——activated，这正是我所追求的。似乎当组件从inactive 变为active 时会调用activated，在“切换”组件时会观察到这种行为，与组件的:is 属性相同。