<style>
*{
font-size: 30px;
}
.card{
height:200px;
background:#ccc;
width:150px;
}
</style>
</head>
<body>
<div id="app">
<tooltip></tooltip>
<popup></popup>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<script type="text/javascript">
var base = {
methods :{
show(){
this.visible = true;
},
hide(){
this.visible = false;
},
toggle(){
this.visible = !this.visible;
}
},
data(){
return{
visible:false,
}
}
}
Vue.component("tooltip",{
template : `
<div>
<span @mouseenter="show" @mouseleave="hide">buys</span>
<div v-if="visible">
day day up
</div>
</div>
`,
mixins :[base]
})
Vue.component("popup",{
template : `
<div>
<button @click="toggle">popup</button>
<div v-if="visible">
<span @click="hide">×</span>
<h4>title</h4>
good good study,day day up;
</div>
</div>
`,
mixins :[base]
})
//初始化父組件
var parent = new Vue({
el:"#app",
data :{
card1 : {
pinned:false
},
card2 : {
pinned:false
},
price:10,
}
})
</script>
混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式∧砸纾混合對象可以包含任意組件選項僵朗。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項屑彻。
混合的時候,碰到同名的情況,以組件的為準.覆蓋了全局的混合對象.
這是vue官方API上的建議:
謹慎使用全局混合對象验庙，因為會影響到每個單獨創(chuàng)建的 Vue 實例 (包括第三方模板)。大多數(shù)情況下社牲，只應(yīng)當應(yīng)用于自定義選項粪薛，就像上面示例一樣。也可以將其用作 Plugins 以避免產(chǎn)生重復(fù)應(yīng)用=
