Vue组件通信讲解[父子组件通信]

Vue组件通信讲解

在Vue中，父子组件之间的通信可以通过props和emit来实现。props用于从父组件向子组件传递数据，而$emit用于从子组件向父组件触发事件。

以下是一个包含子传父和父传子通信的Vue案例解决方案：

父组件：Parent.vue

<template><div><h2>父组件</h2><p>子组件传递的数据：{{ messageFromChild }}</p><Child :message="messageFromParent" @childEvent="handleChildEvent" /></div>
</template><script>
import Child from "./Child.vue";export default {data() {return {messageFromParent: "Hello from parent",messageFromChild: ""};},components: {Child},methods: {handleChildEvent(message) {this.messageFromChild = message;}}
};
</script>

子组件：Child.vue

<template><div><h3>子组件</h3><p>父组件传递的数据：{{ message }}</p><button @click="sendMessageToParent">向父组件发送消息</button></div>
</template><script>
export default {props: {message: String},methods: {sendMessageToParent() {this.$emit("childEvent", "Hello from child");}}
};
</script>

在上述示例中，父组件（Parent.vue）通过将messageFromParent作为props传递给子组件（Child.vue），同时监听子组件的childEvent事件。当子组件触发childEvent事件时，父组件的handleChildEvent方法会被调用，并将子组件传递的消息更新到messageFromChild属性上。这样就实现了子传父的通信。

另外，子组件中的按钮点击事件sendMessageToParent通过this.$emit方法向父组件触发childEvent事件，并将消息作为参数传递给父组件，实现了父传子的通信。

实现Vue中的父子组件通信时，除了使用props和$emit方法，还有其他一些方法可以实现更复杂的场景。

1. 使用$refs：可以通过在父组件中使用ref属性来获取子组件的引用，并直接访问子组件的属性和方法。这种方法适用于父组件需要直接操作子组件的情况。

父组件：Parent.vue

<template><div><h2>父组件</h2><button @click="callChildMethod">调用子组件方法</button><Child ref="childComponent" /></div>
</template><script>
import Child from "./Child.vue";export default {components: {Child},methods: {callChildMethod() {this.$refs.childComponent.childMethod();}}
};
</script>

子组件：Child.vue

<template><div><h3>子组件</h3></div>
</template><script>
export default {methods: {childMethod() {console.log("子组件方法被调用");}}
};
</script>

在上述示例中，父组件通过ref属性给子组件命名为"childComponent"，然后可以使用this.$refs.childComponent来访问子组件的属性和方法。父组件中的callChildMethod方法调用了子组件的childMethod方法。

2. 使用事件总线：可以创建一个用于中央事件处理的事件总线实例，让父组件和子组件通过事件触发和监听进行通信。这种方法适用于非父子关系组件之间的通信。

事件总线：eventBus.js

import Vue from "vue";
export const eventBus = new Vue();

父组件：Parent.vue

<template><div><h2>父组件</h2><button @click="sendMessageToChild">向子组件发送消息</button></div>
</template><script>
import { eventBus } from "./eventBus";export default {methods: {sendMessageToChild() {eventBus.$emit("messageToChild", "Hello from parent");}}
};
</script>

子组件：Child.vue

<template><div><h3>子组件</h3></div>
</template><script>
import { eventBus } from "./eventBus";export default {created() {eventBus.$on("messageToChild", message => {console.log("子组件收到消息：" + message);});}
};
</script>