浅谈 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>