Vue中的组件通讯模式分析

<!-- 父组件 --><template>  <div>    <child-component :message="message" @send="handleSend"></child-component>  </div></template><script>import ChildComponent from "./ChildComponent.vue";export default {  components: {    ChildComponent  },  data() {    return {      message: "Hello World"    };  },  methods: {    handleSend(data) {      console.log(data);    }  }}</script><!-- 子组件 --><template>  <div>    <button @click="handleClick">Send Message to Parent</button>  </div></template><script>export default {  props: {    message: {      type: String,      required: true    }  },  methods: {    handleClick() {      this.$emit("send", "Message from Child");    }  }}</script>

// eventBus.jsimport Vue from "vue";const eventBus = new Vue();export default eventBus;

<!-- 兄弟组件A --><template>  <div>    <button @click="sendMessage">Send Message</button>  </div></template><script>import eventBus from "./eventBus";export default {  methods: {    sendMessage() {      eventBus.$emit("message", "Message from Component A");    }  }}</script><!-- 兄弟组件B --><template>  <div>    <p>{{ message }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>  </div></template><script>import eventBus from "./eventBus";export default {  data() {    return {      message: ""    }  },  created() {    eventBus.$on("message", (data) => {      this.message = data;    });  }}</script>

<!-- 祖父组件 --><template>  <div>    <provide value="Message from Grandfather">      <parent-component></parent-component>    </provide>  </div></template><!-- 父组件 --><template>  <div>    <child-component></child-component>  </div></template><!-- 子组件 --><template>  <div>    <p>{{ message }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>  </div></template><script>export default {  inject: ["value"],  computed: {    message() {      return this.value;    }  }}</script>