mixins混合
混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
例子:
// 定义一个混合对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混合对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"
Mixins一般有两种用途:
- 在已经写好的构造器后,需要增加方法或者临时的活动时使用的方法,这时会混入减少源代码的污染
- 很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码复用
局部混合
<div id="app">
{{num}}
<button @click="add">addNumber</button>
</div>
<script type="text/javascript">
var mixin = {
updated: function() {
console.log("局部混合updated");
}
};
new Vue({
el: "#app",
data: {
num : 1
},
methods : {
add : function() {
this.num++;
}
},
updated : function(){
console.log('原生updated');
},
mixins: [mixin]
});
</script>
当点击按钮,就可以看到控制台的输出了,如下面:
在这里需要注意它们的执行顺序,先是局部的Mixins中的updated,然后再是原生的updated
全局混合
Vue.mixin({
updated : function() {
console.log("全局updated");
}
});
在前面的代码中添入上面的代码,这个时候的执行顺序会是怎样呢?如下
这个时候的执行顺序,就是全局mixin > 局部mixin > 原生