【vue组件通讯②】使用$emit和$on进行组件之间的传值

$emit和$on能够实现组件之间的传值，咱们知道父组件传值给子组件使用props，可是不容许子组件传值给父组件，这时候使用这个就能够实现了。这也能够用在兄弟组件之间的通讯。

注意：$emit和$on的事件必须在一个公共的实例上，才可以触发。

例子：我要实现某个系统的通信录功能，在web端咱们能够使用基于jQuery的ztree插件实现目录的展示，可是在vuejs框架里面，tree目录须要经过递归组件实现。
一、如今有两个组件，父组件contact_index.vue，子组件cust_tree.vue

二、点击父组件里面的选择银行，跳出银行树目录结构（使用vuejs的递归组件实现）,这里面须要作两种传值：
（1）父组件经过props将树目录的数据list传到子组件中造成目录结构的展现；
（2）子组件里面经过点击相应的银行请求查询银行的通信录，这里面须要将点击的银行的机构代码回传给父组件，父组件接收后经过input将机构代码提交给后台请求查询；

第一种是父组件给子组件传值使用props便可，如今咱们来谈谈第二种状况，如何将子组件的值回传给父组件。

网上百度千篇一概全是使用$emit来实现，但是都有一个严重的误区没有给别人说明，开始我都按照搜索的结果进行操做，都会出现子组件$emit后父组件没有监听到函数的变化，研究了很久才发现$emit和$on的事件必须在一个公共的实例上，才可以触发。个人操做以下：

首先在src目录下新加bus.js做为一个公共的实例

import Vue from 'vue'

export var bus = new Vue()

其次，父组件在created里面定义$on监听事件

//父组件与子组件都要import bus.js
import {bus} from '../../bus.js'

created(){
      bus.$on('custTreeSay',(id)=>{
        //监听传值--机构代码
        this.instCode = id;
        //关闭弹窗
        this.popupVisibleTree = false;
        //调用查询方法刷新通信录列表
        this.query();
      });
      bus.$on('custTreeSayName',(name)=>{
        //监听传值--机构名称
        this.instName = name;
      });
}

最后，在子组件中定义点击事件，调用父组件方法经过$emit将相应值传给父组件

<span @click="propInstCode(model);propInstName(model)">
   {{model.name}}
</span>

<script type="text/javascript">
  import {bus} from '../../bus.js'
  export default {
     props: ['model'],//这里经过props接收父组件的传值
     
     //method钩子定义传值方法，这边须要传不一样的值
     methods: {
      //经过总线将值传给父组件
      propInstCode:function (model) {
        //$emit触发当前实例事件
        bus.$emit('custTreeSay',this.model.id);
      },
      propInstName:function (model) {
        bus.$emit('custTreeSayName',this.model.name);
      }
    },
 }

这样就实现了子组件能经过$emit将值传给bus在传给父组件了，最后是经过传的机构代码传给提交给后台查询的，可是咱们同时也须要相应的机构名字来给客户展示，因此这里面只须要设置两个input就好了，机构代码的input隐藏起来，须要传值，另外的机构名称的input显示出来就能够了，以下：

//将点击跳出目录选择的方法放到显示的机构选择就能够了
<div class="query_condition_item">
    <label>选择机构</label>
    <input name="instName" v-model="instName" readonly @click="showTree()">
</div>

<div class="query_condition_item">
    <input name="instCode" v-model="instCode" hidden>
</div>

这篇文章就到这里了，我将我开发遇到的一些问题经验记录下来，也但愿可以帮到你们！！