vue中使用 mixins （混入）的使用

- 日理万妓 2023-10-03 00:59 34阅读 0赞

**目录**

1.是什么

2.作用

3.使用

--------------------

### 1.是什么 ###

> 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

--------------------

### 2.作用  ###

> 主要作用是继承和封装，将一些公共的代码抽离，可以减少代码量，提高复用性。

--------------------

### 3.使用 ###

**以一段代码为例，完整的展示其使用方法：**

// 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';
            }
        }
    }