vue中子组件使用$emit传值的种种情况

Daotin

发布于 2020-09-28 10:54:38

4.6K0

发布于 2020-09-28 10:54:38

文章被收录于专栏：从零开始学 Web 前端从零开始学 Web 前端从零开始学 Web 前端

1、子组件不传递参数，父组件也不接受参数

// 子组件
this.$emit('test')
// 父组件
@test='test'

test() {
    
}

2、子组件传递一个参数，父组件接收时不带形参

// 子组件
this.$emit('test','哈哈')
// 父组件
@test='test'

test(param) {
	console.log(param); // 哈哈
},

3、子组件传递多个参数，父组件接收时需要使用arguments作为形参。arguments是一个数组。

// 子组件
this.$emit('test','哈哈1','哈哈2')
// 父组件
@test='test(arguments)'

test(params) {
	console.log(params[0]); // 哈哈1
 	console.log(params[1]); // 哈哈2
},

4、子组件传递一个参数，父组件在接收参数时还加上了自己的一个属性，那么父组件需要使用形参$event 来替代子组件传递的参数。

// 子组件
this.$emit('test','哈哈')
// 父组件
@test='test('呵呵',$event)'
test(myparam,param) {
     console.log(myparam); // 呵呵
     console.log(param); // 哈哈
},

5、子组件传递多个参数时，父组件在接收参数时还加上了自己的一个属性，那么父组件需要使用形参arguments 来替代子组件传递的多个参数。

// 子组件
this.$emit('test','哈哈1','哈哈2')
// 父组件
@test='test(arguments,'哈哈3')'
test(params,myparam) {
     console.log(params[0]); // 哈哈1
     console.log(params[1]); // 哈哈2
     console.log(myparam); // 哈哈3
},

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-09-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

arguments