vue.js中的mixins

最新推荐文章于 2023-07-11 17:41:32 发布

原创最新推荐文章于 2023-07-11 17:41:32 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #mixins

本文详细介绍了Vue.js中Mixins的使用方法，包括局部混入和全局混入的概念及应用实例。局部混入允许将组件方法分离，增强代码复用性和维护性。全局混入则提供了一种在所有组件中共享行为的方式。

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

vue.js中的mixins

mixins：混入；分为两种，一种是局部混入，一种是全局混入

局部混入

new Vue可以称之为组件或者是根实例，组件中的各种方法全部堆放在组件中，分工不够明确，出了问题就只能找组件的麻烦，所以vue.js就推出了一种方法，mixins。

在组件外创建一个对象，里面写入组件中的其中一个方法，然后在组件中写入mixins：[ obj1，obj2，obj3]；

外部写的方法和组件中的方法不冲突，外部写了组件内还可以写，如果对象名相同，就以组件中的对象方法为主

<script>
    var mixin = {
        methods: {
            sum(){
                alert( 10*10 )
            }
    },
    }
    new Vue({
        el: '#app',
        data: {},
        watch: {},
        mixins: [mixin],
        methods: {
            redecer(){
                alert( 100-10 )
            },
            sum(){
                alert('张骏')
            }
        },
        computed: {}
    })
</script>

全局混入

全局混入就是Vue.mixins();

同样，外部的方法和内部不冲突，如果方法名相同，就以内部的为主，全局混入就相当于总部和分部的区别，一切听总部的

<script>
        Vue.mixin({
            methods: {
                changeName(){
                    alert('zhangjun')
                }
              }
            })
            
        new Vue({
            el: '#app',
            data: {},
            watch: {},
            methods: {
                redecer(){
                    alert( 100-10 )
                },
                sum(){
                    alert('张骏')
                }
            },
            computed: {}
    })
</script>