Vue组件中Mixin的使用

vue中mixin的理解

官方解释

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

例子：

定义一个混入对象：

// myMixins.js

export default {
    data() {
        return {
            num: 1, // 混入对象本身的属性
        }
    },
    created() {
        this.hello(),
    },
    methods: {
        hello() {
            console.log(this.num)
        },
    },
}

把混入对象汇入到当前的组件中：

<template>
    <div>
        <h1>使用mixins</h1>
        <div>组件一</div>
    </div>
</template>

<script>
    import myMixins from "@/mixins/myMixin.js"
    export default {
        mixins: [myMixins],
        computed: {},
        created() {
        },
        methods: {},
    }
</script>

mixin的特点

1.方法和参数在各组件中不共享，虽然组件调用了mixins并将其属性合并到自身组件中来了，但是其属性只会被当前组件所识别并不会被共享，也就是其他组件无法从当前组件中获取到mixins中的数据和方法。

混合对象中的参数num将会被合并到使用mixins的组件中，并作为自身的属性，且每一个使用该mixin的组件的属性并不会相互影响，相当于自身组件中的data中的属性。

值为对象的选项，如methods，components等，选项会被合并，键冲突的组件会覆盖混入对象的

值为函数的选项，如created，mounted等，就会被合并调用，混入对象里的钩子函数在组件里的钩子函数之前调用

与vuex的区别

vuex：用来做状态管理的，里面定义的变量在每个组件中均可使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。