子向父传值

qq_57826511

已于 2022-05-15 18:21:26 修改

阅读量163

点赞数

CC 4.0 BY-SA版权

分类专栏：父子兄弟组件那些事文章标签： vue.js

于 2022-05-15 17:54:04 首次发布

本文链接：https://blog.youkuaiyun.com/qq_57826511/article/details/124785265

父子兄弟组件那些事专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Vue应用中，通过自定义事件和$emit/$on实现子组件向父组件的数据传递，包括创建数据、触发事件和接收事件的方法。

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

子组件：

//子组件
export default{
    data(){
        return {
            // 需要传递给父组件的值
            count: 0
        }
    },
    methods:{
        add(){
            // 通过$emit()触发自定义事件
            // 参数1：自己定义的事件名，供父组件使用
            // 参数2：需要传递的参数
            this.$emit('numchange',this.count)
        }
    }
}

父组件：

// 父组件
<Son @numchange="getNewCount"></Son>

export default{
    data(){
        return {
            // 接收子组件传递过来的值
            countFromSon: 0
        }
    },
    methods:{
        // 获取子组件传递过来的数据
        // 参数val: 与this.count对应(子组件中$emit'参数2'对应)
        getNewCount(val){
            // 赋值
            this.countFromSon = val
        }
    } 
}