Vue之mixins理解与应用

原文地址：http://t.zoukankan.com/emilyzz-p-14202639.html

1、什么是mixins

　　vue提供的一种混合机制，能够更好的实现组件功能复用，混合对象（mixins）可以包含任意组件选项（data、created、mounted、methods、filters等），组件引入后相关选项会进行合并，相当于引入后，父组件各属性进行扩充；

2、方法覆盖

　　在引入mixins的同时，组件中重复定义，minxins中的属性方法会被覆盖

3、应用

　　mixin.js

const mixin = {
    data() {
        return {

　　　　　　　　test: 'mixins变量覆盖组件内变量',

        }
    },
    created() {
        console.log('created: from mixins');
    },
    mounted() {
        console.log('mounted: from mixins');
    }
}
export default mixin

　　组件引入mixin.js

import mixin from '@/mixins/mixin';

　export default {

　　data(){

　　　　return {

　　　　　　test: '组件变量覆盖mixins变量'

　　　　}

　　},

　　mixins: [mixin],　

　　created() {

　　　　console.log(this.test)

　　　　console.log('created: from 当前组件')

　　},

　　mounted() {

　　　　console.log('mounted: from 当前组件')

　　},

　}

　　合并后打印情况