前言

mixin译为混合，在vue中一般用于公共数据公共方法的提取，如果载入mixin的组件中拥有和mixin一样的变量一般会进行合并，并以组件内优先，包括data，components，directives，created，methods等所有组件。

正文

mixin的常规使用

// /src/mixins/mixin1.js
import Demo from '@/components/Demo'
var mixin1 = {
    data() {
        return {
            msg: '1',
            name: 'tyy',
            isInit: true
        }
    },
    components: {
        Demo
    },
    methods: {
        sendMsg() {console.log(this.msg)},
        sayName() {alert(this.name)},
        changeName() {this.name = 'zhh'}
    },
    created() {
        // 此判断条件的添加是为了让mixin有更好的兼容性
        // 因为mixin与组件兼容的方式是合并，相同的以组件内优先，但对于created你无法做到相同变量，以替换掉mixin中的内容
        // 所有需要增加判断条件选择是执行mixin中的内容还是组件中的内容
        if (this.isInit) {
            console.log('执行mixin1中created初始')
        }
    }
}


// home.vue
<template></template>
<script>
    import Demo2 from '@/components/demo2'
    export default {
        data() {
            msg: '这是home中的msg',
            isInit: false
        },
        components: {
            Demo2
        },
        methods: {
            sendMsg() {
                alert(this.msg)
            }
        },
        created() {
            console.log('执行home中的created初始')
        }
    }
</script>

与component相比

mixin和component功能有些类似，都有提取常用或公用部分作为独立的一部分，但mixin对于内容来说采用的是合并，component对于内容是独立的，仍旧只归属于自己使用。未完待续