mixin混入

项目开发过程中，各页面/组件会用到一些复用的方法、data、生命周期中执行某个函数、监听某值。例如获取手机状态栏高度、后台管理列表页增删改查高度雷同复用...等。这时就靠将这些复用的内容提出来，让全局或一类页面混入该对象，减少书写重复

一、局部混入

定义一个 mixins.js 文件，此文件中可以混入Vue中所有的设置项，methods、computed、watch、data、生命周期函数等都可以。

使用时在组件中直接引入此文件使用即可，它的值是一个数组，表示可以混入多个：

// mixins.js文件

export const mixin1 = {
    data() {
        return {
            name: 'bjl'
        }
    }
}
export const mixin2 = {
    methods: {
        showName() {
            console.log(this.name)
        }
    }
}

// 某一个组件中

<template>
    ...
</template>
<script>
import {mixin1, mixin2} from "../mixins.js"
export default {
    mixins: [mixin1, mixin2]
}    
</script>

二、全局混入

全局混入表示混入到Vue对象中，Vue下的所有组件都会使用混入的方法，一定要注意，是所有的组件，所以，在使用全局混入的时候要确保所有的组件都会使用到。

定义一个mixins.js文件，在main.js文件中引入并使用：

//main.js文件

import {mixin1, mixin2} from "../mixins.js"
Vue.mixin(mixin1)
Vue.mixin(mixin2)

如果在使用混入的过程中出现冲突，除生命周期钩子外，其余的都以本组件中的为主，混入的不生效；生命周期钩子产生冲突是先执行混入的声明周期钩子，再执行本组件的生命周期钩子。

很赞哦！ (0)