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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

bus.js

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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果演示