vue中的minix

minix 是個什么東西， 就是混合，把你混合給我

淺顯表述就是

    你說 ： ‘我叫李四’，

    我說 ： ‘我叫張三’，

然后把你 混合給我， 就成了 

     我說 ： ‘我叫張三我叫李四’，

 

所有解說都在例子里，如下：

 

// minix.js
export default {
    data () {
        return {
            name: 'minix',
            minixName: 'minixObj',
            flag: false
        }
    },
    mounted() {
        console.log('minixMounted');
    },
    methods: {
        speak() {
            console.log('this is minix');
        },
        getData() {
            return '100';
        }
    }
}

 

// todo.vue
import myMinix from './minix';

export default {
    data () {
        return {
            name: 'todo',
            lists: [1, 2, 3, 4]
        }
    },
    
    mounted() {
        console.log('todoMounted');
    },
    minixs: [myMinix], // todo.vue 中聲明minix 進行混合
    methods: {
        speak () {
            console.log('this is todo');
        },
        submit() {
            console.log('submit');
        },
    }
}

 

//==========

// 最終得到的結果

//==========

export default {
    data () {
        return {
            name: 'todo', // 共同有的data， 最后保留自己的data
            lists: [1, 2, 3, 4], // 自己獨有的，保留
            minixName: 'minixObj', // todo沒有的，會被添加進來
            flag: false // todo沒有的，會被添加進來
        }
    },
    
    mounted() {
        // 在鈎子函數中的， 會被合並到todo.vue 的鈎子函數中， minix中的代碼在前，自己的在后
        console.log('minixMounted');
        console.log('todoMounted');
    },
    methods: {
        // 同時有的方法， 會被封裝為一個數組， 先執行minix中的，后執行todo自己的
        speak () {
            [
                function() {
                    console.log('this is minix');
                },
                function() {
                    console.log('this is todo');
                }
            ].forEach(item => {
                item();
            })
        },
        // 自己獨有的，保留
        submit() {
            console.log('submit');
        },
        // 自己沒有的方法會被添加進來
        getData() {
            return '100';
        }
    }
}

 

 

(完)