Vue child component passes value to parent component (this.$emit() method)

Original: https://blog.csdn.net/sisi_chen/article/details/81635216

The child component uses this.$emit() to pass the value to the parent component

First, the child component must be referenced in the parent component, and then the value is passed

-The first step is to introduce the child component in the parent component

Use import to introduce components

import indexImportOrder from './components/indexImportOrder'

statement

//定义组件
components:{
    
    
  indexImportOrder,
},

use

<indexImportOrder ref="indexImportOrder"/>

-The second step is that the child component passes the value to the parent component

1. Use this.$emit("function",param); where the child component needs to pass the value to the parent component; //where function is the parent component definition function, and param is the parameter that needs to be passed

//新订单页面跳转
viewBusiness(){
    
    
  let flag = false;
  this.$emit('closeMain',flag);
},

2. Add the function v-on:function="function1" at the reference of the child component in the parent component; //where function is the function defined in the child component, and function1 is the function defined in the parent component-used to receive the value passed by the child component and respond accordingly Data processing, can be defined as the same name

v-on: @function=“function1” can be replaced with @, @ is shorthand for v-on:

<indexImportOrder ref="indexImportOrder" v-on:closeMain="closeMain"/>

val and is the flag in the sub-component, that is, the received sub-component parameter

closeMain(val){
    
    
  this.flag = val;
},

For more detailed explanation, please refer to: https://www.cnblogs.com/padding1015/p/7878741.html