兄弟传值 事件总线

兄弟组件传值

1.创建全局的事件总线

全局Vue实例的创建
暴露全局的Vue实例

import Vue from 'vue'
export default new Vue()

2.子组件A

使用 事件总线.$emit发出事件并传递数据

1. 引入事件总线

import bus from "../utils/eventBus";

2. 发出事件并传递数据

<button @click="telltoSister">告诉我姐姐 我女朋友名字</button>

methods: {
  telltoSister() {
    bus.$emit("getname", this.mygfname);
  },
},

3.子组件B

在mounted钩子函数中使用 事件总线.$on 监听子组件A所发出的事件

1. 引入事件总线

import bus from "../utils/eventBus";

2. 监听事件，调用函数处理

mounted() {
 bus.$on("getname", (data) => {
   this.borgfname = data;
 });
},

3. 处理函数的参数就是组件A所传递的数据