1.mixins基礎概況
混入 (mixins)： 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。
2.mixins的使用方法
2.1.先定義一個mixins，代碼如下
export const
myMixin = {
data(){
return {
num: 1
}
},
created(){
this.hello()
},
methods:{
hello(){
console.log("hello from mixin")
}
}
}
2.2.把定義的mixins引入到組件中，代碼如下
<template>
<div class="template1">
組件1
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default { mixins:[myMixin] } </script>
3.mixins的特點
3.1.引入的mixins中的方法和參數在每一個使用組件中不共享
3.1.1.mixins對象中的參數
export const myMixin = { data(){ return { num: 1 } }, created(){ this.hello() }, methods:{ hello(){ console.log("hello from mixin") } } }
3.1.2.組件1引用mixins對象參數（把num參數加了1）
<template>
<div class="app-container">
<div class="template1">
template1里面的num：{{num}}
</div>
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default {
mixins:[myMixin],
created(){
this.num++
}
}
</script>
<style scoped>
.template1{
font-size:28px;
color:red;
}
</style>
3.1.3組件2引用mixins對象參數（沒有做任何處理）
<template>
<div class="app-container">
<div class="template2">
template2里面的num：{{num}}
</div>
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default {
mixins:[myMixin],
}
</script>
<style scoped>
.template2{
font-size:28px;
color:blue;
}
</style>
3.1.4.總結
組件1：組件1里面處理了num參數，num參數變成處理后的值
組件2：組件2沒有處理num參數，組件2里面的num參數還是mixins里面的值，沒有發生任何改變
3.2.引入的mixins中的為對象，如methods、components等
3.2.1.mixins中的對象會與組件里面的對象合並。對象里面的鍵名出現沖突的情況，組件的對象鍵會覆蓋掉mixins中的對象鍵。
3.2.2.mixins代碼，如下：
export const myMixin = { data(){ return { num: 1 } }, methods:{ func_one(){ console.log("func_one from mixin"); }, func_two(){ console.log("func_two from mixin"); } } }
3.2.3.組件的代碼，如下：
<template>
<div class="app-container">
<div class="main">
這是main
</div>
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default {
mixins:[myMixin],
created(){
this.func_main();
this.func_one();
this.func_two();
},
methods:{
func_main(){
console.log('func_main from mian');
},
func_two(){
console.log('func_two from mian');
},
}
}
</script>
<style scoped>
.main{
font-size:28px;
color:blue;
}
</style>
3.2.4.打印台輸出
3.3.引入的mixins中的為函數，如created、mounted等
3.3.1.會被合並調用，mixins中的函數在組件里的函數之前調用
3.3.2.mixins代碼，如下：
export const myMixin = { data(){ return { num: 1 } }, created(){ console.log("created from mixins"); } }
3.3.3.組件代碼，如下：
<template>
<div class="app-container">
<div class="main">
這是main
</div>
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default {
mixins:[myMixin],
created(){
console.log("created from 組件");
}
}
</script>
<style scoped>
.main{
font-size:28px;
color:blue;
}
</style>
3.3.4.打印台輸出
4.mixins與vuex的區別
4.1.vuex的特點
用來做狀態管理的，里面定義的變量在每個組件中均可以使用和修改，在任何一個組件中修改此變量的值之后，其他組件中的此變量的值也會隨之修改。
4.2.mixins的特點
可以定義共用的變量，在每個組件中使用，引入組件之后，各個變量是相互獨立的。值的修改在組件中不會相互影響。
5.mixins與公共組件的區別
5.1.組件的特點
在父組件中引入子組件，相當於在父組件中給出一片獨立的空間供子組件使用，然后根據props來傳值，但本質上兩者是相對獨立的
5.2.mixins的特點
把mixins引入到組件之后，與組件中的對象和方法進行合並，相當於擴展了組件的對象和方法，可以理解為形成了一個新組件
參考---https://www.cnblogs.com/Ivy-s/p/9937173.html