一般下我们子组件获取父组件传过来的的值得时候,我们是使用props来接收,但是如果我们父组件转过来的值是给孙组件使用时,使用哪个props接收的方式太过麻烦。
这是vue为我们提供了一个实例$attrs,表示该组件标签上的属性实例。
1,$attrs,该组件的实例标签上的属性
例如一个组件在父组件中进行渲染成标签时:
<sona name="小智" age="18" sex="男"></sona>
怎$arrrs表示<sona/>标签上的
name=”小智” age=”18″ sex=”男”
属性的实例。
在子组件内只用用大括号表达式打印看:
他是一个对象,对象没包含了该组件标签的属性和值
我们只要将这个在传过去代孙子组件就可以了,无需在props内接收。
注意:
将inheritAttrs设置成false,
就不会将属性挂载该组件标签上。
传给孙子组件的时候,需要在儿子组件上使
用v-bind:
来实现传值(不能简写)。
<parentson v-bind="$attrs"></parentson>
孙子组件内打印效果:
<div>孙子</div>
孙子
{{ $attrs}}
<button @click="changp">改变</button>
........................
</div>
页面效果:
2,$listeners:该组件上绑定的全部方法实例。
使用方式和$attrs一样,
a,在父组件内:
<sona name="小智" age="18" sex="男" @gotoParentson="gotoParentson"></sona>
b,在子组件内
使用v-on
将方法绑定给孙子组件实例标签上
<parentson v-bind="$attrs" v-on="$listeners"></parentson>
c,孙子组件:
changp() {
this.$listeners.gotoParentson();
}
就可以调用父组件的方法啦!
警告:只能向下传递!!!!!!!