vue使用$emit实现兄弟组件之间的通信 实例

步骤一：

在src目录下创建一个event.js文件（名字自己定义）：

import Vue from 'Vue'

const vm = new Vue;

export default vm;

步骤二：

在组件1和组件2分别引入刚创建的event.js

步骤三：

在其中一个组件，也就是发送事件的组件里面定义发送的内容。

$emit的语法：

$emit（"事件名"，"发送的内容参数"）

<el-button slot="append" icon="el-icon-search" @click="search"></el-button>

methods: {
     search() {
         vm.$emit("to-search", this.searchValue);
     }
}

步骤四：

在另外一个组件（接收），使用$on方法接收事件内容，语法：vm.$on("事件名"，"回调函数")。

mounted: function() {
    vm.$on("to-search",function(data) {
        console.log(data)
    })
}

回调函数中的data参数，就是步骤三上面的this.searchValue的值。