vue中使用$emit传递参数

荣~博客

已于 2024-02-26 13:51:24 修改

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2024-02-26 13:50:31 首次发布

本文链接：https://blog.youkuaiyun.com/bianenhui91/article/details/136297492

文章讲述了Vue中子组件向父组件传递参数的不同策略：单个值和对象，以及处理多参数的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

传递一个参数

1、子组件

this.$emit('getData','abcd')

2、父组件

<child @getData="getData"></child>
getData(data){
	console.log(data) // 'abcd'
}

第一种方法

1、子组件

let obj = {
	data1: 'abcd',
	data2: 'abcdefg'
}
this.$emit('getData',obj)

2、父组件

<child @getData="getData"></child>
getData(data){
	console.log(data) // {data1:'abcd',data2:'abcdefg'}
}

第二种方法

1、子组件

this.$emit('getData','abcd','abcdefg')

2、父组件

<child @getData="getData(arguments)"></child>
getData(data){
	console.log(data[0],data[1]) // 'abcd' 'abcdefg'
}