vuejs使用$emit和$on进行组件之间的传值的示例

import Vue from 'vue'

export var bus = new Vue()

//父组件与子组件都要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;
  });
}

<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);
  }
 },
 }

//将点击跳出目录选择的方法放到显示的机构选择就可以了
<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>