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两个方法。

如上所述，我们已经调用了helloworld、start和samemethod的函数，然而，在mixin中也存在相同的方法，优先级将被给予Vue实例，如下面的控制台中所示。