vue中,子组件向父组件(子传父)使用$emit,传递一个或多个参数

发布时间:2023-05-29 14:30

vue中,子组件向父组件(子传父)使用$emit,传递一个或多个参数

vue中,子组件使用自定义组件向父组件传值时,一般会传递一个参数,但是传递多个参数怎么办呢?

1、传一个参数

// 子组件:
submit(){
	this.$emit('submit',this.id)
}
<!-- 在父组件中使用子组件 -->
<foods-edit  :foodsList="foodsList" @submit="handelFoods"></foods-edit>
<!-- 等同于 -->
<foods-edit  :foodsList="foodsList" @submit="handelFoods($event)"></foods-edit>
  • 绑定事件处理函数时,可以不带括号,形参则默认为事件对象;
  • 如果绑定时带上了括号,再想使用事件对象则需要传入$event作为实参。
// 父组件的方法中接收参数:
handelFoods(e) {
    // 事件处理函数
	console.log(e)
}

2、子组件向父组件传递一个值,并携带额外参数

// 子组件:
submit(){
	this.$emit('submit',this.id)
}
<!-- 在父组件中使用子组件  运用插槽 -->
<template slot="planned_amount" slot-scope="text, record">
  <!-- 在父组件中使用子组件 -->
   <foods-edit :text="text" :inputType="inputType" @submit="handelFoods(record,$event)"></foods-edit>
</template>
// 父组件的方法中接收参数:
handelFoods(record,e) {
    // 事件处理函数
	console.log(record,e)
}
  • 绑定事件处理函数时,record和 e v e n t 的 顺 序 不 做 要 求 , 但 是 按 照 v u e 事 件 绑 定 的 习 惯 , ∗ ∗ event的顺序不做要求,但是按照vue事件绑定的习惯,** eventvueevent通常放在实参列表末尾**。

3、传递多个参数

写法一(推荐)

在触发事件的父组件中加入arguments参数列表

// 子组件:
submit(){
	this.$emit('submit',JSON.stringify(this.foodsList),this.id)
}
<!-- 在父组件中使用子组件 -->
<foods-edit  :foodsList="foodsList" @submit="handelFoods(arguments)"></foods-edit>
// 父组件的方法中接收参数:
handelFoods(e) {
	// e[0]:第一个参数    e[1]  第二个参数
	console.log(e[0],e[1])
}
写法二

可以再父组件中接收的时候不接收参数 ,在方法中直接写参数,传递了几个写几个,一一对应。

// 子组件:向父组件传递了两个值
submit(){
	this.$emit('submit',this.value,this.text)
}
<!-- 在父组件中使用子组件 -->
<foods-edit  :foodsList="foodsList" @submit="handelFoods"></foods-edit>
handelFoods(param1,param2) {
	// param1:第一个参数    param2 第二个参数
	console.log(param1,param2)
}
  • 绑定事件处理函数时,不能携带括号!!!如果携带括号并且在括号内加了$event,只能拿到子组件传递过来的第一个参数。
写法三
// 子组件:向父组件传递了两个值
submit(){
	this.$emit('submit',this.value,this.text)
    // this.$emit('submit','11','文本')
}
<!-- 在父组件中使用子组件  运用插槽 -->
<template slot="planned_amount" slot-scope="text, record">
  <!-- 在父组件中使用子组件 -->
   <foods-edit :text="text" :inputType="inputType" @submit="handelFoods(record,arguments)"></foods-edit>
</template>
// 父组件的方法中接收参数:
handelFoods(record,args) {
    // 事件处理函数
	console.log(record,args)  // '11','文本'
}

arguments是方法绑定中的一个关键字,内部包括了所有方法触发时传递过来的实参。arguments和额外参数的位置谁先谁后不做要求,建议arguments放后面。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号