vue - minix混入

分手后的思念是犯贱 2021-09-19 00:34 483阅读 0赞

vue中混入是是实现类继承的重要方式。  
    混入的规则实例

##### minix.js #####

export default {
        data () {
            return {
                name: 'minix',
                minixName: 'minixObj',
                flag: false,
                obj: {
                	class: 'classtest',
                	id: 'idtest'
                }
            }
        },
        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],
                obj: {
                	todoclass: 'todoclasstest',
                	id: 'idtodotest'
                }
            }
        },
        
        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没有的，minix会被添加进来
                flag: false, // todo没有的，会被添加进来
                obj: {	// 对象时，整个对象会进行合并，相同属性名的组件会进行覆盖
                	class: 'classtest',
                	todoclass: 'todoclasstest',
                	id: 'idtodotest'
                }
            }
        },
        
        mounted() {
            // 在钩子函数中的， 会被合并到todo.vue 的钩子函数中， minix中的代码在前，自己的在后
            console.log('minixMounted');
            console.log('todoMounted');
        },
        methods: {
        	// 重复方法会被覆盖
            speak () {
                console.log('this is todo');
            },
            // 自己独有的，保留
            submit() {
                console.log('submit');
            },
            // 自己没有的方法会被添加进来
            getData() {
                return '100';
            }
        }
    }

转载于https://www.cnblogs.com/hanguozhi/p/10407105.html