vue mixins & extends

最新推荐文章于 2023-02-27 12:49:07 发布

原创最新推荐文章于 2023-02-27 12:49:07 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #mixins #extends

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文探讨了 Vue.js 中 Mixin 的使用技巧，包括全局 Mixin 和局部 Mixin 的执行顺序，以及局部 Mixin 如何覆盖全局 Mixin 的方法。通过实例展示了不同 Mixin 之间的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const myMixin = {
        created(){
            console.log(this.msg + '1')
        },
        methods:{
            hello(){
                console.log(this.msg + '2')
            }
        }
    };
    Vue.mixin({
        created(){
            console.log(this.msg + '3');
        },
        methods:{
            hello(){
                console.log(this.msg + '4');
            }
        }
    })
    //-----------------------------------------------------------
    //如果全局mixin和组件内mixin有同名的钩子函数，钩子函数都会执行，并且先执行全局后执行组件内。
    //hello3       index.html:30
    //hello1       index.html:20 
    //-----------------------------------------------------------
    Vue.filter('uppercase',function(value){
        return value.toUpperCase();
    })
    var vm = new Vue({
        el: "#app",
        mixins:[myMixin],
        data:{
            msg:'hello'
        }
    });

const myMixin = {
        created(){
            this.hello();
        },
        methods:{
            hello(){
                console.log(this.msg + '2')
            }
        }
    };
    Vue.mixin({
        created(){
            this.hello();
        },
        methods:{
            hello(){
                console.log(this.msg + '4');
            }
        }
    })
    //-----------------------------------------------------------
    // 组件内的会覆盖全局的。
    //hello2       index.html:24
    //hello2       index.html:24
    //-----------------------------------------------------------