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;