Vue的provide/inject,mixins混入，slot插槽用法学习

1.provide / inject

（1）provide和inject须要一块儿使用，以容许其祖先组件向其全部子孙后代注入一个依赖，不论层次有多深

（2）provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性；

element的form里面代码以下：

element的formItem的代码以下：

（3）inject 选项应该是 一个字符串数组 或者一个对象，

在element的input中的代码以下：在input中，使用this.elForm便可获得当前form的this，使用this.elFormItem可获取到当前formItem的this。

2.mixins（混入）

mixins 选项接受一个混入对象的数组；例如element中的formItem中的emitter;

emitter对应的值为：

这样在formItem中，能够经过this.dispatch()调用dispatch方法，能够经过this.broadcast()调用broadcast方法；至关于formItem组件的methods中增长了dispatch和broadcast方法；

tip: 若是混入的是生命周期函数，则会先调用混入的生命周期函数，在调用组件自身的生命周

期函数。

3.slot插槽的用法

（1）<slot> 元素做为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

（2）没有name的slot:

若是组件a为：

则使用a组件的时候，a组件包裹的内容将替换<slot></slot>;以下图：<button>测试按钮</button>将替换slot;

（3）有name的slot:

若是组件a为：

则使用a组件的时候，只有使用v-slot:testSlot时，a组件包裹的内容将替换<slot name="testSlot"></slot>;以下图：<button>测试按钮</button>将替换slot;

tip: v-slot命令只能用于component或者template;