$attrs
包含了⽗作⽤域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当⼀个组件没有声明任何 prop 时,这⾥会包含所有⽗作⽤域的绑定 (class 和 style 除外),并且可以通过 vbind="$attrs" 传⼊内部组件——在创建⾼级别的组件时⾮常有⽤。
使用:
// child:并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>
v-bind="$attrs"
inheritAttrs: false,
禁用特性继承
inheritAttrs: false;
如果你不希望组件的根元素继承特性,你可以在组件的选项中设置。
这尤其适合配合实例的 $attrs 属性使用,该属性包含了传递给一个组件的特性名和特性值。
provide/inject
能够实现祖先和后代之间传值
// ancestor
provide() {
return {foo: 'foo'}
}
// descendant
inject: ['foo']
slot
插槽语法是Vue 实现的内容分发 API,⽤于复合组件开发。该技术在通⽤组件库开发中有⼤量应⽤。
- 匿名插槽
// comp1
<div>
<slot></slot>
</div>
// parent
<comp>hello</comp>
- 具名插槽
将内容分发到⼦组件指定位置
// comp2
<div>
<slot></slot>
<slot name="content"></slot>
</div>
// parent
<Comp2>
<!-- 默认插槽⽤default做参数 -->
<template v-slot:default>具名插槽</template>
<!-- 具名插槽⽤插槽名做参数 -->
<template v-slot:content>内容...</template>
</Comp2>
- 作⽤域插槽
分发内容要⽤到⼦组件中的数据
// comp3
<div>
<slot :foo="foo"></slot>
</div>
// parent
<Comp3>
<!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
<template v-slot:default="slotProps">
来⾃⼦组件数据:{{slotProps.foo}}
</template>
</Comp3>