mixins

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

// 代码片段，只关心mixin即可
<script>
    import mo from './module.vue'
    let mixin = {
        created() {
            console.log('混入对象')
        }
    }
    export default {
        mixins: [mixin],
        components: {
            mo
        },
        data() {
            return {
                msg: '这是根组件的消息'
            }
        },
        mounted() {
            window.console.log(this.$root)
        },
        created() {
            window.console.log('created')
        }
    }
</script>

混入对象是钩子函数时将会在组件钩子函数之前执行

image.png

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

比如，数据对象在内部会进行递归合并，在和组件的数据发生冲突时以组件数据优先。

<script>
    import mo from './module.vue'
    let mixin = {
        created() {
            window.console.log('混入对象')
        },
        methods: {
            showMixin() {
                window.console.log('mixin中')
            }
        }
    }
    export default {
        mixins: [mixin],
        components: {
            mo
        },
        data() {
            return {
                msg: '这是根组件的消息'
            }
        },
        methods: {
            showMixin() {
                window.console.log('组件中')
            }
        },
        mounted() {
            window.console.log(this.$root)
        },
        created() {
            window.console.log('created')
        }
    }
</script>

image.png

当使用全局混入时，混入的对象将会在之后声明的组件中体现，因此使用需要慎重

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"