[TOC] #### 1. 混入概述 --- 混入 (minxin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時，所有混入對象的選項(xiàng)將被 “混合” 進(jìn)入該組件本身的選項(xiàng) ```javascript // 定義一個混入對象 const myMixin = { data() { return { name: "liang", }; }, methods: { sayHello() { console.log("hello !"); }, }, }; // 定義一個使用混入對象的組件 export default { mixins: [myMixin], data() { return {} } } ``` #### 2. 選項(xiàng)合并 --- 當(dāng)組件和混入對象含有同名選項(xiàng)時，這些選項(xiàng)將 **以恰當(dāng)?shù)姆绞竭M(jìn)行合并** 數(shù)據(jù)對象 (data 選項(xiàng)) 在內(nèi)部會進(jìn)行遞歸合并，同名時以組件數(shù)據(jù)優(yōu)先，示例如下所示： 如果混入 myMixin, myMixin2 兩個對象，數(shù)據(jù)對象同名時優(yōu)先級為：**組件數(shù)據(jù) > myMixin2 數(shù)據(jù) > myMixin 數(shù)據(jù)** ``` mixins: [myMixin, myMixin2] ``` 同名鉤子函數(shù)將合并為一個數(shù)組，都會被調(diào)用。混入對象的鉤子將在組件自身鉤子之前調(diào)用。 ```javascript const mixin = { created() { console.log('混入對象的鉤子被調(diào)用') } } new Vue({ mixins: [mixin], created() { console.log('組件鉤子被調(diào)用') } }) // => "混入對象的鉤子被調(diào)用" // => "組件鉤子被調(diào)用" ``` 對于值為對象的選項(xiàng)，如：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) 利用全局混入實(shí)現(xiàn)全局分享 混入也可以進(jìn)行全局注冊，使用時一定要格外小心 ！一旦使用全局混入，將影響每一個之后創(chuàng)建的 Vue 實(shí)例 ```javascript const mixin = { methods: { foo() { console.log("混入對象的方法"); }, }, }; Vue.mixin(mixin); ```