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