vue中使用v-bind=“$attrs“进行多层组件的传值

有如下的嵌套关系

<grandfather>
	<father>
		<grandson>
		</grandson>
	</father>
</grandfather>

• 比如说在grandfather中传给了father一些props

grandfather.vue

<div>
	<father
	name="test"
	age="18"
	hobby="badminiton"
	grade="3"
	>
	</father>
</div>

• 然后在father接收一些想要的值

father.vue

<div>
	<grandson v-bind="$attrs">
	</grandson>
</div>

props: {
      name: {
        type: String,
        default: 'default'
      },
      age: {
        type: String,
        default: 'default'
      }
    }
注意这里并没有接收hobby和grade这两个值
那么这两个未被father接收的值就可以通过v-bind="$attrs"
传递给grandson了

• grandson接收一些father没有接受的值

props:{
	hobby:{
		type:string
	},
	grade:{
		type:string
	}
}

总结

1.v-bind="$props": 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。

vm.$props: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

2.v-bind="$attrs": 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。

vm.$attrs:包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

3.v-on="将父组件标签上的自定义事件向下传递其子组件可以直接通过emit(eventName)的方式调用。

vm.$listeners:包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。