Vue Mixin 与小程序 Mixins 应用

最新推荐文章于 2025-06-04 23:40:38 发布

原创最新推荐文章于 2025-06-04 23:40:38 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #小程序

一.什么是Mixin(混入)

混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

二.为什么要使用混入

1.1 Mixin的优点

混入可以减少程序中重复的功能，增强函数的复用性.当一个应用程序可能需要在各种对象中共享行为时，我们可以通过Mixin中维持这种共享功能并专注于程序中真正不同的功能，轻松避免任何重复，使项目结构更加清晰更加易于维护。

2.1 Mixin的缺点

Mixin是一种很灵活的代码复用方式，但把功能属性和方法导入，如果文件过多，会导致属性方法来源方面的不确定性，在大型系统中需要对项目文件的划分以及整体的掌控。

三.Mixins的特点

方法和参数在各组件中不共享
数据对象
mixin的数据对象和组件的数据发生冲突时以组件数据优先。
值为对象的选项
如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的，比如混入对象里有个方法A，组件里也有方法A，这时候在组件里调用的话，执行的是组件里的A方法

四.Vue Mixins 应用

定义公共的mixins文件：如mixin.vue


<template>

</template>

<script>
    export default {
        name: 'mixins-test-main',
        components: {},
        props: {},
        data () {
            return {
                mixinData: 'mixin中的变量'
            }
        },
        methods: {
            mixinFunction () {
                return '我是mixins里面的公共方法'
            },
        },
        mounted () {
        },
        computed: {}
    }
</script>

<style scoped>
</style>

在你页面内调用：需要import这个mixins文件，然后通过mixins:[‘文件名’]来使用

<template>
    <div>
        <div @click="handleMixin">调用mixin方法</div>
    </div>
</template>

<script>
    import MixinItem from './mixin'

    export default {
        name: 'mixin-test-comp',
        props: {},
        mixins: [MixinItem],
        components: {},
        data () {
            return {}
        },
        methods: {
            handleMixin () {
                console.log('mixin-data=========', this.mixinData)
                let mixfun = this.mixinFunction()
                console.log('mixin-fun====>>>', mixfun)
            },
        },
        mounted () {
        },
        computed: {}
    }
</script>

<style scoped>
</style>

注意点:混入的方法会覆盖掉之前页面内部的同名属性或方法。

五.小程序Mixins应用

小程序的Page并没有给出混入的API以及解方案，如果想要实现混入，需要自己封装Mixins方法，来实现对象方法以及属性的混入，达到代码的复用的目的。

1.1 Mixins 使用

在项目根目录中新建 mixins 文件夹，并在 mixins 文件夹之下新建 tabbar-badge.js 文件，封装为一个 mixin 文件：

module.exports = {
    data:{
        two:"我是Mixin里面的数据"
    },
    b(){
        console.log("我是b函数",this.data.one)
    }
}

导入 @/mixins/tabbar-badge.js 模块并进行使用

import mixin1 from "../../mixins/public/mixin1.js";
Page({
    mixins:[mixin1],
    data:{
        one:"我是index里面的数据"
    },
    a(){
        console.log("我是a函数",this.data.two)
    },
    onLoad(){
        this.a();
        this.b();
    }
})

六.如果发生命名冲突该怎么办？

当mixin中的数据、方法或任何组件选项与组件中的选项具有相同的名称时，可能会发生组件与其mixin之间的命名冲突。如果发生这种情况，则组件本身的属性将优先。
示例代码如下:

// mixin.js 
export default {
   data () {
      title: ‘Mixin’
   }
}

// main.js file
import mixin from ‘./mixin.js’
export default {
   mixins: [mixin],
   data () {
      title: ‘Component’
   },
   created: function () {
      console.log(this.title)   // "Component"
   }
}