vue.js - 如何从父组件调用子组件中的方法？

Question

我有 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() 首先执行，我想在第四个组件中调用检查方法

我该怎么做？

Answer 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 实例作为中心。