vue中子组件使用$emit传值的种种情况
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
},
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步