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（）首次执行，我想在第四个组件中调用check方法

我该怎么做？

Answer 1

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

您将创建一个全局变量：

:_destroy

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

params.require(:campaign).permit(cities_attributes: [:id, :_destroy])

并且，再次在任何组件中听取该事件，请执行：

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>（在您的组件中）并使用您自己的Vue实例作为集线器。

Answer 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>

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

2 个答案: