vue - minix混入

转载已于 2022-03-21 13:35:41 修改 · 8.5k 阅读

9 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/hanguozhi/p/10407105.html

文章标签：

#vue #minix #混入 #data #生命周期

于 2019-04-18 22:35:08 首次发布

vue 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了Vue中混入(mixin)的使用方法及其规则，通过具体实例展示了混入如何帮助实现组件间的代码复用，特别是在类继承场景下的应用。文章涵盖了混入的数据、方法、生命周期钩子等组成部分如何在组件中正确合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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');
    },
    mixins : [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