## **1. mixins作用** * 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。 * **有點類似于繼承的關系,定義組件的方法，數據供其他人使用，且數據和方法不共享** ## **2. 實例** ### **2.1 基礎小案例** **1. mixins-test.js 定義公用數據和方法** ~~~ // 定義了一個字面量類型的 組件模板對象 export const m1 = { data() { return { sonmsg: { name: '小頭兒子', age: 6 } } }, mounted(){ alert('mixins提供的mounted生命函數') }, methods: { myclick() { this.$emit('func', this.sonmsg) } } } ~~~ **2. mixins公用方法和數據** HelloWorld.vue ~~~ <template> <div class="hello"> {{sonmsg}} </div> </template> <script> import {m1} from '@/util/mixins-test' export default { name: "HelloWorld", props: { msg: String }, mixins: [m1] }; </script> ~~~ 彈出alert并顯示共有數據   ### **2.2 數據和方法隔離** **新建一個testmixns.vue組件** * **引用了mixins共有數據的組件間，數據互相隔離不受影響** * 同一組件引入***methods,components*等，選項會被合并，沖突后，覆蓋mixins引入的方法** * **生命周期函數會依次執行，不會覆蓋** 重復的mounted方法，執行了兩次，但是about組件的mounted方法執行的是自己的info方法， #### 生命周期函數，不會覆蓋，依次執行（先執行mixins的） mixins ~~~ // 定義了一個字面量類型的 組件模板對象 export const m1 = { data() { return { sonmsg: {name: '小頭兒子', age: 6} } }, mounted() { alert('mixins提供的mounted生命函數') // this.info() }, methods: { info() { alert("mixins的info方法"); } } } ~~~ testximns ~~~ <template> <div class="hello"> {{sonmsg.age+10}} </div> </template> <script> import {m1} from '@/util/mixins-test' export default { name: "testmixins", props: { msg: String }, mixins: [m1], mounted() { alert("test自己的mounted方法"); // this.info() }, methods:{ info() { alert("test自己的info方法"); } } }; </script> ~~~ mounted方法執行了兩次    數據是隔離的  #### methods的方法會覆蓋mixins的方法 ~~~ mounted() { // alert("test自己的mounted方法"); this.info() }, ~~~ ~~~ mounted() { // alert('mixins提供的mounted生命函數') this.info() }, ~~~ 兩次mounted都執行自己的info方法