如果我们有一组公共数据,方法,如ajax链接,适配方法等等,我们不能也不太可能去一个个的组件里写上这些,所以我们需要混入来将公共的内容混入到需要的组件上:
var mixdata={
data:function(){
return{
a1:"a1",
a2:"a2",
a3:"olda3"
}
},
methods:{
hello:function(){
console.log("hello");
console.log(this.$data)
}
}
}
var component1={
data:function(){
return{
a3:"a3"
}
},
template:`
<div @click="clickBoard">模板1</div>
`,
mixins:[mixdata],
methods:{
clickBoard:function(){
this.hello();
console.log(this.a3)
}
}
}
var vue=new Vue({
el:".app",
components:{
component1
}
})
如上,mix就被混合进模板里了,点击这个模板合一看到混入数据。
请注意data是一个方法,返回data数据
选项合并
如果混入的数据方法和组件自己的方法数据重合了,那么【以组件的数据方法优先】。
如果你在混合中添加created钩子,你会发现混合的钩子会先于组件的钩子执行,所以组件的内容会覆盖上去。
全局混入
混入也可以全局设定,但就和全局组件一样,一旦设定会出现后面的每个组件当中——
Vue.mixin({
methods:{
sayHello:function(){
console.log("lets say hello")
}
}
})