【Vue】强大的Mixin混入

作者: 玬____ | 来源:发表于2021-04-19 15:23 被阅读0次

什么是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)

相关文章

  • 【Vue】强大的Mixin混入

    什么是mixin?个人理解:mixin可以定义公用的,data,created,methods,computed,...

  • vue 组件的理解

    Vue.mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对...

  • vue混入mixin

    Vue.mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对...

  • vue mixin

    混入 mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象...

  • Vue 之 混入(mixins)

    Vue 之 混入(mixins) 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功...

  • Vue3+TS Day15 - Mixin、Compositio

    一、Mixin 1、Mixin的英文意思是什么?在Vue主要用来做啥? 【Mixin】:混入 【功能】:抽取组件中...

  • vue mixin(混入)

    目的 增强组件功能的可复用性,一个混入对象可以包含任意组件选项

  • vue混入mixin

    mixin主要作用是提取组件中相同的代码,对生命周期、methods、components、data都可以做提取,...

  • Vue混入(mixin)

    理解:一个混入对象可以包含任意组件选项,这些选项将混入到组件本身的选项;作用:用来分发Vue组件中的可服用功能; ...

  • vue 混入 (mixin)

    何为混入? 混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”。但是与继承不同的是,继承一...

网友评论

    本文标题:【Vue】强大的Mixin混入

    本文链接:https://www.haomeiwen.com/subject/stkilltx.html