浅谈 v-bind=“$props“、v-bind=“$attrs“、v-on=“$listeners“的关系用法

父级A----->子级B----->孙级C 传值

目标是父级属性传递给孙级,解决A传B传C繁琐传值问题

方法一:使用 $attrs

父级A

<father name="张三" age="50" />

子级B 无需使用 Props 接收,它会把父级传递过来的name、age 都传给 孙级

在子级B里面引用孙级C <Sun v-bind="$attrs" />

在孙级C里使用Props 接收  props:['name','age']

方法二:使用 $props

不同在于要什么就拿什么,没有在子级B里接收则在孙级C就不会有!

需要在子级B里 接收 props:['name']

在孙级C里使用Props 接收  props:['name']

v-on="$listener 是接收孙级C方法事件

在孙级C里 使用 this.$emit('sendFun', '爷爷你好!')

在子级B里 的孙级组件 <Sun v-bind="$attrs"  v-on="$listeners"/>,子级B不再需要添加任务方法

在父级响应方法就可 <father name="张三" age="50" @sendFun="sendFun"></father>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值