浅谈Vue2 this.$emit()的使用

概要

this.$emit() 是子组件向父组件传递数据的方法。

作用： 触发一个自定义事件。

流程：
子组件：this.$emit(‘事件名’, 数据)
父组件：@事件名=“处理函数” 来接收和处理。

整体架构流程

子组件使用this.$emit()向父组件传值

首先必须在父组件中引用子组件，然后实现传值操作

1. 引入组件
2. 声明
3. 使用

import indexImportOrder from './components/indexImportOrder'
// 定义组件
      components:{
        indexImportOrder,
      },
<indexImportOrder ref="indexImportOrder"/>

子组件向父组件传值

this.$emit(“function”,param); //其中function为父组件定义的函数，param为需要传递的参数。

// 子组件函数
viewBusiness(){
   let flag = false;
   this.$emit('closeMain',flag);
},

在父组件中子组件引用的地方添加函数v-on:function=“function1”；
// 其中function为子组件中定义的函数，function1为父组件定义的函数，用于接收子组件传值并进行相应数据处理，可定义为同一名称。
v-on： 可用 @ 代替 @function=“function1” ，@ 为 v-on：的简写

<indexImportOrder ref="indexImportOrder" @closeMain="closeMain"/>

val及为子组件中flag，即接收的子组件参数

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

小结

本文简单介绍了this.$emit() 的父组件使用子组件，触发子组件事件返回处理结果给父组件，完成子组件到父组件的通信过程。