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>
VueJS混入mixins使用例子

当混入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实例和混入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实例,如下面的控制台中所示。

混入mixins和vue实例使用相同方法实例
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?