Vue 混合mixins
2017-10-27 本文已影响94人
哼_
<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) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
混合的时候,碰到同名的情况,以组件的为准.覆盖了全局的混合对象.
这是vue官方API上的建议:
谨慎使用全局混合对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。也可以将其用作 Plugins 以避免产生重复应用=
