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>

在上述示例中，通过创建一个名为eventBus的事件总线实例，父组件可以通过eventBus.$emit方法触发名为"messageToChild"的事件并传递消息。子组件通过eventBus.$on方法监听"messageToChild"事件，并在事件触发时执行相应的回调函数。

Vue的组件通信有子传父和父传子,子传入父用emit发送回调函数,父传子直接在props中传入参数即可.