mixins 官方把它叫做混合兴喂，
它更像是 重復(fù)功能和數(shù)據(jù)的存儲(chǔ)器
如：兩個(gè)組件之前蔼囊，他們有重復(fù)的功能和數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
</style>
</head>
<body>
<div class="demo">
<myarticle></myarticle>
<other></other>
</div>
<template id="atc">
<div>
<h2 @mouseenter='show' @mouseleave='hide'>come on! baby!!!</h3>
<p v-if="isShow">ohh my god.This is a...</p>
</div>
</template>
<template id="btn">
<div>
<button @click="onClick">click me</button>
<div v-show="isShow">
<h2>This is a story about...</h2>
<p>Register.com offers domain name registration, web hosting, website design and online marketing - all in one place. Award-winning customer service and ...</p>
</div>
</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
//第一個(gè)組件
Vue.component('myarticle',{
template:"#atc",
data:function(){
return {
isShow:false,
}
},
methods:{
show:function(){
this.isShow = true;
},
hide:function(){
this.isShow = false;
}
}
});
//另一個(gè)組件
Vue.component("other",{
template:'#btn',
methods:{
onClick:function(){
this.isShow=!this.isShow;
}
},
data:function(){
return {
isShow:false,
}
}
});
new Vue({
el:'.demo'
});
</script>
</body>
</html>
以上兩個(gè)組件都有同樣的顯示和隱藏功能，數(shù)據(jù)也是有一樣的衣迷。重復(fù)了很多代碼畏鼓。這個(gè)時(shí)候vue提供了一個(gè)選項(xiàng)mixins機(jī)制，可以把一些東西定義到mixins里面壶谒。來(lái)更方便的存儲(chǔ)這些重復(fù)功能和數(shù)據(jù)云矫。相當(dāng)于用一個(gè)數(shù)組來(lái)保持這些代碼，然后在要用的組件定義中mixins進(jìn)去汗菜，注意如果組件定義中有mixins的數(shù)據(jù)让禀，組件定義的不會(huì)被mixins的數(shù)據(jù)覆蓋，相當(dāng)于樣式寫在行間的陨界。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
</style>
</head>
<body>
<div class="demo">
<myarticle></myarticle>
<other></other>
</div>
<template id="atc">
<div>
<h2 @mouseenter='show' @mouseleave='hide'>come on! baby!!!</h3>
<p v-if="isShow">ohh my god.This is a...</p>
</div>
</template>
<template id="btn">
<div>
<button @click="onClick">click me</button>
<div v-show="isShow">
<h2>This is a story about...</h2>
<p>Register.com offers domain name registration, web hosting, website design and online marketing - all in one place. Award-winning customer service and ...</p>
</div>
</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
//定義一個(gè)mixins對(duì)象巡揍，其實(shí)就是普通對(duì)象，可以將它當(dāng)做component定義里的對(duì)象來(lái)書(shū)寫普碎。其實(shí)就是組件之間的共同點(diǎn)吼肥。
var bases ={
data:function(){
return {
isShow:false,
}
},
//如果還有其他共同選項(xiàng)數(shù)據(jù)可繼續(xù)加...
};
//第一個(gè)組件
Vue.component('myarticle',{
template:"#atc",
methods:{
show:function(){
this.isShow = true;
},
hide:function(){
this.isShow = false;
}
},
mixins:[bases]//可以理解為，將一個(gè)或者多個(gè)mixins對(duì)象通過(guò)數(shù)組的形式追加到組件定義里頭。即vue會(huì)合并這個(gè)對(duì)象和組件
});
Vue.component("other",{
template:'#btn',
methods:{
onClick:function(){
this.isShow=!this.isShow;
}
},
mixins:[bases]//可以理解為缀皱，將一個(gè)或者多個(gè)mixins對(duì)象通過(guò)數(shù)組的形式追加到組件定義里頭斗这。即vue會(huì)合并這個(gè)對(duì)象和組件
});
new Vue({
el:'.demo'
});
</script>
</body>
</html>
mixins:[bases]
定義組件的時(shí)候加了mixins的選項(xiàng)，就自動(dòng)加了mixins的功能啤斗。vue會(huì)合并這個(gè)對(duì)象和組件表箭。
可以理解為，將一個(gè)或者多個(gè)mixins對(duì)象通過(guò)數(shù)組的形式追加到組件定義里頭钮莲。
