Vue实现$emit传参

最新推荐文章于 2025-06-11 10:30:17 发布

疾风小影

最新推荐文章于 2025-06-11 10:30:17 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/dotaxpj/article/details/116931993

vue 专栏收录该内容

1 篇文章

订阅专栏

子组件单参

子组件：

this.$emit('hanldeParent','son')

父组件不传参：

<childCom @hanldeParent="handle"/>
<!-- handle($event)中的$event可省略 -->
 handle(name){
     console.log(name) // 'son'
 }

父组件传参：

<childCom @hanldeParent="handle($event,'abc',age)"/>
<!-- handle($event)中的$event不能省略 -->
data(){
    return {
        name:'parent', 
        age:18
    }
}
methods:{
    handle(name,param,age){
        console.log(name,param,age) // 'son','abc',18
    }
}

子组件多参

子组件：

this.$emit('hanldeParent','son',123,'abc')

父组件不传参：

<childCom @hanldeParent="handle(arguments)"/>
handle(params){
    console.log(params) //  ['son',123,'abc']
}

父组件传参：

<childCom @hanldeParent="handle(arguments,true,age)"/>
<!-- handle($event)中的$event不能省略 -->
data(){
    return {
        name:'parent', 
        age:18
    }
}
methods:{
    handle(vals,param,age){
        console.log(vals,param,age) // ['son',123,'abc'],true,18
    }
}