Vue组件化 $attrs/provide/inject/slot

$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>