vue快速入门（四十）非父子组件通信

注释很详细，直接上代码

上一篇

新增内容

1. 媒介js的创建
2. 发送组件发送事件示例
3. 接收组件接收事件示例

源码

App.vue

<template>
  <div id="app">
    <TessFirst></TessFirst>
    <TestSecond></TestSecond>
  </div>
</template>
<script>
import TessFirst from "./components/TestFirst.vue";
import TestSecond from "./components/TestSecond.vue";
export default {
  name: "App",
  components: {
    TessFirst,
    TestSecond
  },
  data() {
    return {
    };
  },
  methods: {
  },
};
</script>
<style>
</style>

bus.js

import Vue from 'vue'
// 创建一个空的vue实例
export default new Vue()

TestFirst.vue

<template>
  <div>
    发送组件：
    <input type="text" v-model="sendMessage" @input="handleChange" />
  </div>
</template>
<script>
//以bus为桥梁
import bus from "../bus.js";
export default {
  data() {
    return {
      sendMessage: "",
    };
  },
  methods: {
    //发送消息
    handleChange(e) {
      //向bus发送方法与数据
      bus.$emit("getMessage", e.target.value);
    },
  }
};
</script>

<style lang="less" scoped></style>

TestSecond.vue

<template>
  <div>接收组件的值：{{ getMessage }}</div>
</template>

<script>
//以bus为媒介接收订阅事件
import bus from "../bus.js";
export default {
  data() {
    return {
      getMessage: "",
    };
   
  },
  created() {
      //监听事件，接收订阅事件并渲染
      bus.$on("getMessage", (val) => {
        this.getMessage = val;
      });
    }
};
</script>

<style lang="scss" scoped></style>

效果演示