0
点赞
收藏
分享

微信扫一扫

【Vue】强大的Mixin混入

ZGtheGreat 2021-09-28 阅读 64

什么是mixin?

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

为什么使用mixin?

vue页面开发时,有些代码在各个页面总是要写很多遍,代码都是一摸一样的,这时就需要mixin了,可以让页面干净整洁,代码量减少,冗余代码减少。

如何使用mixin?

一般来说,注入mixin有两种方式:

举个栗子?,以一个简单的数字递增来看:

exampleMixin.js

export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        addCount() {
            setInterval(() => {
                this.count++
            }, 1000)
        }
    },
    created() {
        this.addCount(); // 结果:一秒递增1
    }
}
  • 页面自身注入方式:
// test.vue

import mixin from 'mixins/exampleMixin'

export default {
    mixins: [mixin],
    // 业务代码
    .... 
}
  • 全局注入方式:
//main.js

import Vue from 'vue';
import mixin from 'mixins/exampleMixin';
Vue.mixin(mixin)

举报

相关推荐

0 条评论