组件refs和bus事件总线

refs 1.ref放到标签上，拿到的是原生节点 **2.ref放在组件上，拿到的是组件对象 **

bus事件总线（实现兄弟组件的通信） ** 1.创建中央事件总线 2.一个事件通过$emit触发事件 3.一个事件通过 $on监听事件** 具体做法 1.新创建一个 .js 文件，比如 event-bus.js 2.在event-bus.js文件里写下以下代码 import Vue from ‘vue’ export const EventBus = new Vue()

3.在负责触发事件的兄弟组件1中，先引入EventBus import { EventBus } from “…/event-bus.js”; 再EventBus.$emit <button @click=“changeRelative()”>click

changeRelative () { EventBus.$emit("kerwin","来children2的问候") //"kerwin"是触发的事件名，在监听时间的组件里的事件名须跟这里一致 }

4.在负责监听事件的兄弟组件2 中，先引入EventBus import { EventBus } from “…/event-bus.js”; 再EventBus.$on，在mounted声明周期中进行监听

children3

1111111

data(){ return{ isShow:false } }, mounted(){ EventBus.$on('kerwin',(data)=>{ console.log("接收消息",data) this.isShow = !this.isShow }) }

5.移除事件监听者 如果想移除事件的监听，可以像下面这样操作：

import { eventBus } from ‘./event-bus.js’ EventBus.$off(‘decreased’, {})

你也可以使用 EventBus.$off(‘kerwin’)来移除应用内所有对此事件的监听。或者直接调用EventBus.$off() 来移除所有事件频道， 注意不需要添加任何参数 。