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.js
import 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 class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11072">
                            <img src="https://img.php.cn/upload/webcode/000/000/018/176484960870398.jpg" alt="威客">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11072">威客</a>
                            <p>PHP威客系统威客贰系统是国内领先的威客网站内容管理系统，基于PHP+Mysql架构开发。整合UCHOME系统，系统内容模块由：威客悬赏，招标任务，人才库，人才，招聘，新闻资讯，在线支付，发贴推广，案例示范等多种功能组成。 威客贰系统独创的单人悬赏、 多人悬赏 、计件悬赏 、 定金招标、 本地招标为核心任务模式。超强的发贴推广可以分配到不同的任务模式不同的会员等级有不同的提成费用,根据网站自身需要</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="威客">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11072" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="威客">
                        </a>
                    </div>
                
  </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>