在上一节中,我们学习了VueJS路由的使用,首先要安装vue-router,然后要创建路由组件和链接,在Vue实例中添加进行使用。本节我们来学习VueJS的混入mixins的用法,混入mixins一般与组件结合使用,它们在组件之间共享可重用代码。当组件使用混入mixins时,mixins的所有选项都成为组件选项的一部分。
<div id="app"></div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
},
methods: {
},
});
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
alert("VueJS混入mixins例子");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>

当混入mixin和组件包含重叠的选项时,它们将被合并,如下面的示例所示。
<div id="app"></div>
<script type="text/javascript">
var mixin = {
created: function () {
console.log('mixin called')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('component called')
}
});
</script>
混入mixin和vue实例创建了相同的方法,下面我们在控制台中看到的输出。正如所见,vue实例和混入mixin的选项将被合并。

如果我们碰巧在方法中有相同的函数名,那么vue实例将具有优先权。
<div id="app"></div>
<script type="text/javascript">
var mixin = {
methods: {
hellworld: function () {
console.log('HelloWorld');
},
samemethod: function () {
console.log('Mixin:Same Method');
}
}
};
var app = new Vue({
mixins: [mixin],
methods: {
start: function () {
console.log('start method');
},
samemethod: function () {
console.log('Main: same method');
}
}
});
app.hellworld();
app.start();
app.samemethod();
</script>
我们将看到混入mixin有一个方法属性,其中定义了helloworld和samemethod函数。类似地,vue实例也有一个方法属性,其中定义了start和samemethod两个方法。
如上所述,我们已经调用了helloworld、start和samemethod的函数,然而,在mixin中也存在相同的方法,优先级将被给予Vue实例,如下面的控制台中所示。
