VueJS混入mixins用法完全解读教程

在上一节中，我们学习了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实例，如下面的控制台中所示。