VueJS – Mixins混入（15）
Mixin 基本上是和组件一起使用的。它们在组件之间共享可重用的代码。当组件使用 mixin 时，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 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 实例将优先。
例子
<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 = {
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 中也存在相同的方法，但是，将优先考虑主实例，如以下控制台所示。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
