混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
示例
<html>
<head>
<meta charset="utf-8" />
<title>VueJs混合(Mixins)示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
alert("Welcome to mixin example");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
</body>
</html>
在浏览器中打开上面示例文件，效果如下 -
当一个混合(mixin)和一个组件包含重叠选项时，它们将被合并，如下例所示。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var mixin = {
created: function () {
console.log('mixin called')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('component called')
}
});
</script>
</body>
</html>
现在mixin和vue实例创建了相同的方法。下面是在控制台中看到的输出。如下所见，vue和mixin的选项将被合并。
如果碰巧在方法中有相同的函数名，那么主vue实例将会优先。
示例
创建一个文件：mixins-2.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs混合(Mixins)示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var mixin = {
methods: {
hellworld: function () {
console.log('In HelloWorld');
},
samemethod: function () {
console.log('Mixin:Same Method');
}
}
};
var vm = new Vue({
mixins: [mixin],
methods: {
start: function () {
console.log('start method');
},
samemethod: function () {
console.log('Main: same method');
}
}
});
vm.hellworld();
vm.start();
vm.samemethod();
</script>
</body>
</html>
如上面代码中，mixin有一个方法属性，其中定义了helloworld和相同的方法函数。 同样，vue实例也有一个方法属性，在这个属性里面又定义了两个方法start和samemethod。
以下每个方法都被调用。
vm.hellworld(); // In HelloWorld
vm.start(); // start method
vm.samemethod(); // Main: same method
如上所示，已经调用了helloworld，start和same方法。 同样的方法也存在于mixin中，但优先级将赋予主实例，如下面的控制台所示。