Vue组件通信：使用自定义事件进行跨级通信

<template>
  <div>
    <button @click="sendMessage">发送消息给孙子</button>
    <child></child>
  </div>
</template>

<script>
import Vue from "vue";
import child from "./child";

export default {
  components: {
    child
  },
  methods: {
    sendMessage() {
      Vue.prototype.$bus.$emit("messageEvent", "Hello Grandchild!");
    }
  }
};
</script>

<template>
  <div>
    <p>{{ message }}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10819">
                            <img src="https://img.php.cn/upload/webcode/000/000/009/176387940355113.jpg" alt="逍遥商城系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10819">逍遥商城系统</a>
                            <p>一套傻瓜式的建站程序，适合各行业迅速建立自己的产品销售和展示网站。本系统由前台购物、后台管理、在线支付三部分组成，功能强大、使用简单、管理方便，只要会打字就会维护网站，管理网站就像做选择题和填空题一样简单v2.2版新增或改进的功能有：1.修补暴库漏洞、SQL注入漏洞；2.对会员及管理员密码使用MD5不可逆加密；3.增加邮件通知功能，有新的订单后，会向管理员发送邮件通知，结合QQ邮箱、邮箱短信通知功</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="逍遥商城系统">
                                <span>1</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10819" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="逍遥商城系统">
                        </a>
                    </div>
                
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  },
  mounted() {
    this.$bus.$on("messageEvent", message => {
      this.message = message;
    });
  }
};
</script>