在上一节中，我们学习了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两个方法。
【VueJS混入mixins用法完全解读教程】如上所述，我们已经调用了helloworld、start和samemethod的函数，然而，在mixin中也存在相同的方法，优先级将被给予Vue实例，如下面的控制台中所示。
文章图片
推荐阅读
- VueJS渲染函数（render function）用法和原理详解
- VueJS路由使用完全解读
- VueJS自定义指令和过滤器用法详解
- VueJS过渡和动画（transition & animation）使用详细教程
- VueJS渲染指令v-for、v-if、v-else、v-show用法详解
- VueJS事件处理v-on用法全解
- Python字典（Dictionary）完全解读和用法详解
- jQuery 带有示例的detach()用法代码
- 算法库（C++魔术师STL算法用法示例）