$emit and $on can transfer values between components. We know that parent components use props to transfer values to child components, but child components are not allowed to transfer values to parent components. This can be achieved by using this. This article mainly introduces examples of vuejs using $emit and $on to transfer values between components. It has certain reference value. If you are interested, you can learn about it. I hope it can help everyone.
Note: The $emit and $on events must be on a public instance to be triggered.
Example: I want to implement the address book function of a certain system. On the web side, we can use the ztree plug-in based on jQuery to display the directory. However, in the vuejs framework, the tree directory needs to be implemented through recursive components.
1. Now there are two components, the parent component contact_index.vue and the child component cust_tree.vue
##2. Click inside the parent component Select a bank and jump out of the bank tree directory structure (implemented using the recursive component of vuejs). Two values need to be passed:
(1) The parent component passes the data list of the tree directory to The display of the directory structure is formed in the sub-component;
(2) In the sub-component, click on the corresponding bank to request to query the bank's address book. Here, the institution code of the clicked bank needs to be returned to the parent. Component, the parent component submits the organization code to the background request query through input after receiving it;
The first is that the parent component passes the value to the child component using props. Now let's talk about the second case, how Pass the value of the child component back to the parent component.
Baidu on the Internet always uses $emit to implement, but there is a serious misunderstanding that is not explained to others. At first, I followed the search results and it always appeared that the parent component did not monitor after the subcomponent $emit. After studying the function changes for a long time, I discovered that the $emit and $on events must be triggered on a public instance. My operation is as follows:
First, add bus.js as a public instance in the src directory
import Vue from 'vue'
export var bus = new Vue()
Copy after login
Secondly, the parent component is defined in created $on listens for events
//父组件与子组件都要import bus.js
import {bus} from '../../bus.js'Copy after login
created(){
bus.$on('custTreeSay',(id)=>{
//监听传值--机构代码
this.instCode = id;
//关闭弹窗
this.popupVisibleTree = false;
//调用查询方法刷新通讯录列表
this.query();
});
bus.$on('custTreeSayName',(name)=>{
//监听传值--机构名称
this.instName = name;
});
}Copy after login
Finally, define the click event in the child component, call the parent component method and pass the corresponding value through $emit Pass it to the parent component
{{model.name}}
Copy after login
