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;