Javascript Vue中的父子交互

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

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

parent.vue文件

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

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

您可以为子组件分配一个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>

您可以将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>

简短回答：您可以使用道具和监视/计算属性来实现此目的

父组件：

根据您的情况，您可以在父组件中将foo定义为您的数据属性，并使用推荐的方式使用v-model将foo绑定到输入元素 或 将其保持与您已侦听输入事件的状态相同，并且一旦将foo更改为true，它就等于某个值hello

一旦foo值发生变化，Vue反应性就会发挥作用，并通知/重新呈现子组件

子组件：

现在，在这里，你可以观察道具的变化，一旦它变为真，你就可以调用一个函数/方法someFunction

以下是供您理解的简短答案：您可以使用道具和观看/计算属性来实现此目的

父组件：

根据您的情况，您可以在父组件中将foo定义为您的数据属性，并使用推荐的方式使用v-model将foo绑定到输入元素 或 将其保持与您已侦听输入事件的状态相同，并且一旦将foo更改为true，它就等于某个值hello

一旦foo值发生变化，Vue反应性就会发挥作用，并通知/重新呈现子组件

子组件：

现在，在这里，你可以观察道具的变化，一旦它变为真，你就可以调用一个函数/方法someFunction

以下是您可以用来触发来自不同组件的事件的

首先，初始化Vue.prototype.$bus=newVue；在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.prototype.$bus=newVue；在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'
    })
}