Question

我想知道如何在Vue中进行亲子互动。

让我给你一个小例子来解释它。

parent.vue文件

<template>
    <div>
        <input @input="validate" type="text" />
        <child-component></child-component>
    </div>
</template>

<script>
    export default {
        methods: {
            validate(event) {
                if (event.target.value == 'hello') {
                    // make my child component to do something
                }
            }
        }
    }
</script>

child.vue文件

<script>
    export default {
        methods: {
            someFunction() {
                alert('Success');
            }
        }
    }
</script>

注意：这只是一个示例。我的实际情况在这里解释起来并不复杂

在此示例中，我想知道当父组件中的if条件变为true时如何在子组件中触发函数someFunction()。

Answer 1

您可以将ref分配给子组件，然后使用$refs直接在子组件上调用方法。

<template>
    <div>
        <input @input="validate" type="text" />
        <child-component ref="child"></child-component>
    </div>
</template>

<script>
    export default {
        methods: {
            validate(event) {
                if (event.target.value == 'hello') {
                    this.$refs.child.someFunction();
                }
            }
        }
    }
</script>

Vue Docs Ref

Answer 2

简短答案：您可以为此目的使用道具和监视/计算属性。

父组件：

根据您的情况，您可以将foo定义为父组件中的data属性，然后使用foo将v-model绑定到输入元素（建议使用方式）或保持与您已经做过的相同（监听输入事件），并且一次，它等于某个值 hello （在您的大小写），将foo更改为true。

一旦foo值更改，Vue反应性就会发挥作用，并通知/重新渲染子组件。

子组件：

现在，在这里，您可以监视以了解道具的变化，并且一旦它变成true，您就可以调用函数/方法（someFunction）。

这里是fiddle，供您理解

Answer 3

您可以使用vue event bus触发来自不同组件的事件。

首先，在Vue.prototype.$bus = new Vue();文件中初始化main.js。

让您的父组件发送事件：

validate(event) {
    if (event.target.value == 'hello') {
        this.$bus.$emit('throw', 'Hi')
    }
}

然后让您的子组件收听：

created() {
    this.$bus.$on('throw', ($event) => {
        console.log($event)  //shows 'Hi'
    })
}

Vue中的亲子互动

3 个答案: