vuejs uses $emit and $on to pass values ​​between components

$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()

Secondly, the parent component is defined in created $on listens for events

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

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

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

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

This way, the child component can pass the value to the bus through $emit and then pass it to the parent component. Finally, the passed institution code is passed to the backend for query, but we also need the corresponding institution name to display to the customer, so we only need to set two inputs here, and the input of the institution code is hidden. If a value needs to be passed, the input of another institution name can be displayed, as follows:

##

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

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

Related recommendations:

vuejs2 .0 Method to implement paging component using $emit for event monitoring data transfer_javascript skills

The above is the detailed content of vuejs uses $emit and $on to pass values ​​between components. For more information, please follow other related articles on the PHP Chinese website!