Mixins基本上与组件一起使用。它们在组件之间共享可重用的代码。当组件使用mixin时，mixin的所有选项都将成为组件选项的一部分。看个例子：
<html>
<head>
<title>VueJs - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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("欢迎来到Web176教程网！");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
</body>
</html>运行下看下效果吧。
当mixin和组件包含重叠选项时，它们将合并，如以下示例所示：
<html>
<head>
<title>VueJs - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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实例将具有优先权。
例
<html>
<head>
<title>VueJs - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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具有method属性，其中定义了helloworld和samemethod函数。类似地，vue实例具有一个methods属性，其中再次定义了两个方法start和samemethod。
以下每个方法均被调用。
vm.hellworld(); // In HelloWorld vm.start(); // start method vm.samemethod(); // Main: same method
如上所示，我们已经调用了helloworld，start和samemethod函数。mixin中也存在samemethod，但是优先级将赋予主实例，如以下控制台所示。
作者：terry，如若转载，请注明出处：https://www.web176.com/vuejs/991.html
