子组件传值给父组件

参考视频 : https://www.bilibili.com/video/av32790541/?spm_id_from=trigger_reload

原理:

在父组件引用子组件时,通过事件绑定机制把一个方法aaaa的引用传给子组件,这个方法中可以有各种参数,子组件在触发自己的函数或者某些数据发生变化时,触发:事件绑定机制绑定的函数,通过参数的方式将要传的值传过来,父组件中处理,也就接到了子组件的值

 

最开始父组件本身有一个方法 : fatherMethods

fatherMethods(){
    console.log('父组件的方法')    
}

 

步骤①:在子组件被调用的标签中,绑定一个父组件方法的引用

父组件通过事件绑定机制,也就是 

@sendSon="fatherMethods"

 方式传值给子组件, 注意,这里是方法的引用,换句话就是把这个方法传递给子组件,而不是方法执行完以后的值,所以这里不能加括号 

目的:把父组件的一个方法传给子组件

 

步骤② 给子组件写一个引发事件

子组件中写一个事件会触发一个子组件本身的方法

@click="sonEdit()"
@change="sonEdit()"
@mouseover="sonEdit()"

 步骤③  子组件触发这个引发事件

子组件本身的方法sonEdit,其中通过$emit操作父组件传过来的sendSon方法绑定的父组件的方法引用fatherMethods,这时就触发了父组件的方法

换句话说:子组件通过$emit出发了从父组件传过来的方法

sonEdit(){
    this.$emit('sendSon')
    }

 步骤④  子组件在调用父组件时,传参数

真正的父组件中并没有调用这个show方法,只有传给的子组件中调用了,调用就可以传参数,那么就在子组件中触发时候传参数

步骤⑤  在调用的时候传参数

$emit在触发父组件传过来的值的时候,第一个参数是方法名,从第二个起,后面均可以传参数,

show方法里面可以写的是对参数的一系列操作,也就变相完成了从子组件向父组件传值的需求

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值