1. 程式人生 > >(十四)vue之混入

(十四)vue之混入

概述

1.混入 (mixins) 是一種分發 Vue 元件中可複用功能的非常靈活的方式。
2.混入和元件是多對多的關係(一個混入物件可作用到多個元件或例項上,多個混入物件也可作用到一個元件或者例項上)
3.混入物件可以包含任意元件選項。(methods或data或鉤子函式...)
4.當元件使用混入物件時,所有混入物件的選項將被混入該元件本身的選項。

例子:
在這裡插入圖片描述

選項合併

當元件和混入物件含有同名選項時,這些選項將以恰當的方式混合。
比如,資料物件在內部會進行淺合併 (一層屬性深度),在和元件的資料發生衝突時以元件資料優先

Data資料演示
在這裡插入圖片描述
Methods方法的演示
在這裡插入圖片描述

注意:Vue.extend() 也使用同樣的策略進行合併。

鉤子函式的混入

1.同名鉤子函式將混合為一個數組,因此都將被呼叫。
2.另外,混入物件的鉤子將在元件自身鉤子之前呼叫。
在這裡插入圖片描述

全域性混入

也可以全域性註冊混入物件。注意使用!
一旦使用全域性混入物件,將會影響到 所有 之後建立的 Vue 例項。
使用恰當時,可以為自定義物件注入處理邏輯。
基本演示
在這裡插入圖片描述
為自定義的選項 ‘myOption’ 注入一個處理器。【全域性混入的推薦做法】
在這裡插入圖片描述

謹慎使用全域性混入物件,因為會影響到每個單獨建立的 Vue 例項 (包括第三方模板)。大多數情況下,只應當應用於自定義選項,就像上面示例一樣