this.$emit:Vue父子组件传值

vue 中子组件跟父组件通信需要使用 this.$emit (), 我们先来回顾一下，父组件和子组件的通讯使用什么呢？

Copy
1.父组件向子组件传值：通过v-bind:的形式进行数据的传递(可直接简写为冒号) 然后子组件 使用props来接收
如:
// 父组件
<todo-item v-bind:item="item"
v-bind:index="index"
v-for="(item,index) in list"></todo-item>
// 子组件
var TodoItemValue = {
props: ['item','index'],// 'item','index'就是父组件通过v-bind向子组件传递的
template:" {{item}}{{index}} "
}
2.子组件向父组件传值呢？ 这个时候就需要用到this.$emit()方法了

子组件向父组件传值，基本流程如下:

第一步：在父组件中引入子组件

使用 import 引入组件

Copy
import indexImportOrder from './components/indexImportOrder'

声明

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

使用

Copy
<indexImportOrder ref="indexImportOrder"/>

第二步 子组件向父组件传值

在子组件中需要向父组件传值处使用 this.$emit (“function”,param);
其中function为父组件定义函数，param为需要传递参数

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

在父组件中子组件引用处添加函数 v-on=“function1”；
其中function为子组件中定义函数，function1为父组件定义函数--用于接收子组件传值并进行相应数据处理，可定义为同一名称

v-on： 可用 @ 代替 @function=“function1” ，@ 为 v-on：的简写

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

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

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

完