vue父子组件props传值,如何在子组件method里拿到父组件数据

子组件挂载的时候,props传值,数据挂载命名:用驼峰命名法命名,在子组件在methods里才可以通过this.xx获取。
注意命名要规范。

父组件通过props传值给子组件,子组件在methods里要拿到父组件传递过来的数据有2种情况:
第一种:父组件传递的参数是固定的,data里面定义的参数,这时候在子组件通过this.xxx就可以获取到,但是要注意命名方式,如下:
父组件里:子组件在父组件挂载时绑定数据,注意前面要以“-”连接,后面要以驼峰规则命名

,data里面的数据命名

子组件获取的时候:通过props接收

这样,在methods里就能通过this.userName获取到父组件的数据。

第二种情况:父组件传递的参数是动态改变的,这种在子组件里按照上面的方式是获取不到动态改变后的数据的。这种情况下也有2种解决方法(也许还有其他方法)
1、用v-if 定义一个flag,初始为false,在动态改变了username的时候flag设置为true,
父组件:

子组件:


通过this.username就可以拿到动态改变后的数据
2、在子组件用watch监听数据的变化。

watch: { username: function (newVal,oldVal){ console.log(newVal,oldVal) } },
  • 5
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值