[TOC] #### 1. 混入概述 --- 混入 (minxin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被 “混合” 進入該組件本身的選項 ```javascript // 定義一個混入對象 const myMixin = { data() { return { name: "liang", }; }, methods: { sayHello() { console.log("hello !"); }, }, }; // 定義一個使用混入對象的組件 export default { mixins: [myMixin], data() { return {} } } ``` #### 2. 選項合并 --- 當組件和混入對象含有同名選項時，這些選項將 **以恰當的方式進行合并** 數據對象 (data 選項) 在內部會進行遞歸合并，同名時以組件數據優先，示例如下所示： 如果混入 myMixin, myMixin2 兩個對象，數據對象同名時優先級為：**組件數據 > myMixin2 數據 > myMixin 數據** ``` mixins: [myMixin, myMixin2] ``` 同名鉤子函數將合并為一個數組，都會被調用?；烊雽ο蟮你^子將在組件自身鉤子之前調用。 ```javascript const mixin = { created() { console.log('混入對象的鉤子被調用') } } new Vue({ mixins: [mixin], created() { console.log('組件鉤子被調用') } }) // => "混入對象的鉤子被調用" // => "組件鉤子被調用" ``` 對于值為對象的選項，如：methods、components、directives，將合并為一個對象，鍵名同名時取組件對象的鍵值對 ```javascript const mixin = { methods: { foo() { console.log("混入對象的方法"); }, }, }; new Vue({ mixins: [mixin], methods: { foo() { console.log("組件的方法"); }, }, }); vm.foo() // => "組件的方法" ``` #### 3. 全局混入 --- [uView 小程序分享](https://www.uviewui.com/js/mpShare.html) 利用全局混入實現全局分享 混入也可以進行全局注冊，使用時一定要格外小心 ！一旦使用全局混入，將影響每一個之后創建的 Vue 實例 ```javascript const mixin = { methods: { foo() { console.log("混入對象的方法"); }, }, }; Vue.mixin(mixin); ```