vue2组件通信的几种方式

Vue2组件之间的通信可以通过props、$emit、$parent、$children、$refs、event bus等方式实现。

通过 props 和 $emit 实现父子组件通信
父组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <child :message="message" @update-message="updateMessage"></child>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  name: "Parent",
  components: { Child },
  data() {
    return { title: "Parent Component", message: "Hello World" };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    },
  },
};
</script>

子组件

<template>
  <div>
    <h1>{{ title }}</h1>
    <child :message="message" @update-message="updateMessage"></child>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  name: "Parent",
  components: { Child },
  data() {
    return { title: "Parent Component", message: "Hello World" };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    },
  },
};
</script>

通过 $parent 和 $children 实现父子组件通信
父组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <child></child>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  name: "Parent",
  components: { Child },
  data() {
    return { title: "Parent Component" };
  },
  mounted() {
    console.log(this.$children[0].message);
  },
};
</script>

子组件：

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "Child",
  data() {
    return { title: "Child Component", message: "Hello World" };
  },
  mounted() {
    console.log(this.$parent.title);
  },
};
</script>

通过 $refs 实现父子组件通信
父组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <child ref="child"></child>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
  <script>
import Child from "./Child.vue";
export default {
  name: "Parent",
  components: { Child },
  data() {
    return { title: "Parent Component" };
  },
  methods: {
    changeMessage() {
      this.$refs.child.message = "New Message";
    },
  },
};
</script>

子组件：

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "Child",
  data() {
    return { title: "Child Component", message: "Hello World" };
  },
};
</script>

通过 event bus 实现任意组件之间的通信
在 main.js 中创建 event bus：

import Vue from 'vue'
export const EventBus = new Vue()

组件 A 发送事件：

<template>
  <div><button @click="sendMessage">Send Message</button></div>
</template>
<script>
import { EventBus } from "@/main.js";
export default {
  name: "ComponentA",
  methods: {
    sendMessage() {
      EventBus.$emit("message", "Hello World");
    },
  },
};
</script>

组件 B 接收事件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import { EventBus } from "@/main.js";
export default {
  name: "ComponentB",
  data() {
    return { message: "" };
  },
  created() {
    EventBus.$on("message", (message) => {
      this.message = message;
    });
  },
};
</script>