如何从父组件调用子组件中的方法？

Posted 2023-02-22

【中文标题】如何从父组件调用子组件中的方法？

【英文标题】：How can I call method in child component from parent component?

【发布时间】：2018-09-06 12:27:29

【问题描述】：

我有 4 个组件

我的组件首先是这样的：

<template>
    ...
     <component-second></component-second>
    ...
</template>
<script>
    ...
    export default 
        ...
        updated() 
            // call check method in the component fourth
        
    
</script>

我的组件第二个是这样的：

<template>
    ...
     <component-third></component-third>
    ...
</template>
<script>
    ...
    export default 
        ...
    
</script>

我的第三个组件是这样的：

<template>
    ...
     <component-fourth></component-fourth>
    ...
</template>
<script>
    ...
    export default 
        ...
    
</script>

我的第四个组件是这样的：

<template>
    ...
</template>
<script>
    ...
    export default 
        ...
        methods: 
            check() 
                ...
            
        
    
</script>

所以，如果首先执行组件中的 update()，我想在第四个组件中调用 check 方法

我该怎么做？

【问题讨论】：

对于 Vue 3，see this answer on using mitt.

【参考方案1】：

您可以使用 Vue 实例作为事件总线。

您将创建一个全局变量：

var eventHub = new Vue(); // use a Vue instance as event hub

要发出您将在任何组件中使用的事件：

eventHub.$emit('myevent', 'some value');

并且，要再次在任何组件中收听该事件，请执行以下操作：

eventHub.$on('myevent', (e) => 
    console.log('myevent received', e)
);

演示：

var eventHub = new Vue(); // use a Vue instance as event hub

Vue.component('component-first', 
    template: "#component-first-tpl",
    data()  return someFlag: true ,
    updated() 
      eventHub.$emit('myevent', 'some value');
    
);
Vue.component('component-second', 
    template: "#component-second-tpl"
);
Vue.component('component-third', 
    template: "#component-third-tpl"
);
Vue.component('component-fourth', 
    template: "#component-fourth-tpl",
    created() 
      eventHub.$on('myevent', (e) => 
      	console.log('myevent received', e)
        this.check();
      );
    ,
    methods: 
        check() 
            console.log('check called at fourth');
        
    
)

new Vue(
  el: '#app',
  data: 
    message: 'Hello Vue.js!'
  
)

<script src="https://unpkg.com/vue"></script>

<template id="component-first-tpl">
    <div>
        <component-second></component-second>
        
        <br>
        someFlag:  someFlag 
        <button @click="someFlag = !someFlag">Trigger update</button>
    </div>
</template>
<template id="component-second-tpl">
    <div>
        <component-third></component-third>
    </div>
</template>
<template id="component-third-tpl">
    <div>
        <component-fourth></component-fourth>
    </div>
</template>
<template id="component-fourth-tpl">
    <div><h1>I'm Number 4</h1></div>
</template>

<div id="app">
  <p> message </p>
  <component-first></component-first>
</div>

注意：如果在您的环境中创建一个专用实例作为事件中心很复杂，您可以将 eventHub 替换为 this.$root（在您的组件中）并使用您自己的 Vue 实例作为中心.

【讨论】：

你也可以使用this.$parent，或者父母可以创建一个Vue实例来传递给每个孩子，这样他们就可以互相交谈。正确的解决方案取决于关系的性质。

是的，当然。此事件中心解决方案假定远距离后代/祖先之间需要通信。其实是recommended in the official docs。

【参考方案2】：

我会尝试在父方法中创建一个数据元素并将其传递给其子方法，然后在component-four 中观察它，并在其值更改时触发检查方法。

<template>
    ...
    <component-second update-flag="updateFlag"></component-second>
    ...
</template>
<script>
...
export default 
    data()
        return 
            updateFlag: true;
        
    
    updated() 
        // call check method in the component fourth
       updateFlag = !updateFlag;
    

</script>

组件-秒：

<template>
    ...
    <component-third update-flag="updateFlag"></component-third>
    ...
</template>
<script>
...
export default 
    ...
    props: ['updateFlag']

</script>

第三个组件：

<template>
    ...
    <component-fourth update-flag="updateFlag"></component-third>
    ...
</template>
<script>
...
export default 
    ...
    props: ['updateFlag']

</script>

第四个组件：

<template>
    ...
</template>
<script>
...
export default 
    ...
    props: ['updateFlag'],
    watch: 
        updateFlag: function (val) 
            this.check();
        
    ,
    methods: 
        check() 
            ...
        
    

</script>