vuejs使用$emit和$on在组件之间传递值的例子

$emit和$on可以在组件之间传递值。我们知道父组件将值传递给子组件使用道具，但是不允许子组件将值传递给父组件，所以这是可以实现的。

注意：$emit和$on事件必须在一个公共实例上才能被触发。

例：我想实现某系统的通讯录功能。在web端，我们可以使用基于jQuery的ztree插件来显示目录，但是在vuejs框架中，树目录需要通过递归组件来实现。

1.有两个组件，父组件contact_index.vue和子组件cust_tree.vue

2.单击父组件中的选择银行，跳出银行树目录结构(由vuejs的递归组件实现)。有两种类型的值传递：

(1)父组件通过道具将树目录的数据列表传递给子组件，形成目录结构的展示；

(2)在子组件中，通过点击对应的银行请求查询银行的通讯录，需要将被点击银行的机构代码回传至父组件，父组件收到后通过输入提交至后台请求查询；

第一个是父组件可以通过使用道具将值传递给子组件。现在我们来讨论第二种情况，如何将子组件的值传递回父组件。

互联网上的百度一直都是用$emit来实现的，但是有一个严重的误解，一直没有向别人解释。一开始我总是根据搜索结果进行操作，父组件并不监控子组件$emit后的函数变化。经过长时间的研究，发现$emit和$on的事件必须在公共实例中才能被触发。我的操作如下：

首先，在src目录中添加bus.js作为公共实例

从“vue”导入vue导出varbus=newvue()其次，父组件在创建的监听事件中定义了$on

//父组件和子组件都应该导入总线。“js导入{bus}自”././公交车。js' created () {bus。$ on(' cust triesey '，(id)={//侦听并传递值-this . inst code=id；//关闭弹出窗口this.popupVisibleTree=false//调用查询方法刷新通讯录列表this . query()；});公交车。$ on(' custrieseyname '，(name)={//侦听并传递值-机构名称this.instName=name});}最后，在子组件中定义click事件，调用父组件方法，通过$emit将相应的值传递给父组件

span @click='propInstCode(模型)；propInstName(model)' { { model . name } }/span script type=' text/JavaScript ' import { bus } from '././bus . js ' export default { prop s 3360[' model ']，//这里，父组件传递的值是通过props接收的。//方法钩子定义了值传递方法。在这里，需要传递一个不同的值methods: {//通过总线将该值传递给父组件propinstcode3360function (model)。//$ emit触发当前实例事件总线。$ emit(' custriesey '，这个。model.id)。}，propinnstname : function(model){ bus。$ emit(' custreasyname '，this . model . name)；}}，}这样子组件可以通过$emit将值传递给bus，然后传递给父组件，最后通过传递的机构代码传递给后台查询，但同时我们也需要对应的机构名称展现给客户，所以只需要设置两个输入，机构代码的输入是隐藏的，所以需要传递值，另外一个机构名称的输入可以显示如下：

//将点击出目录的方法放到显示的组织中进行选择。Div class=' query _ condition _ item ' labe input name=' inst name ' v-model=' inst name ' readonly @ click=' show tree()'/Div class=' query _ condition _ item ' input name=' inst code ' v-model=' inst code ' hidden/Div本文就到这里。我来记录一下我在发展中遇到的一些问题，希望对大家有所帮助！也希望大家多多支持我们。