vuejs使用$emit和$on进行组件之间的传值的示例-创新互联

$emit和$on可以实现组件之间的传值，我们知道父组件传值给子组件使用props，但是不允许子组件传值给父组件，这时候使用这个就可以实现了。

创新互联公司是一家集网站建设,香洲企业网站建设,香洲品牌网站建设,网站定制,香洲网站建设报价,网络营销,网络优化,香洲网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

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

例子：我要实现某个系统的通讯录功能，在web端我们可以使用基于jQuery的ztree插件实现目录的展现，但是在vuejs框架里面，tree目录需要通过递归组件实现。

1、现在有两个组件，父组件contact_index.vue，子组件cust_tree.vue

2、点击父组件里面的选择银行，跳出银行树目录结构（使用vuejs的递归组件实现）,这里面需要做两种传值：

（1）父组件通过props将树目录的数据list传到子组件中形成目录结构的展示；

（2）子组件里面通过点击相应的银行请求查询银行的通讯录，这里面需要将点击的银行的机构代码回传给父组件，父组件接收后通过input将机构代码提交给后台请求查询；

第一种是父组件给子组件传值使用props即可，现在我们来谈谈第二种情况，如何将子组件的值回传给父组件。

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

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

import Vue from 'vue'

export var bus = new Vue()

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：vuejs使用$emit和$on进行组件之间的传值的示例-创新互联
本文网址：http://shouzuofang.com/article/cejdce.html