vue的mixins的使用

淡淡的烟草味﹌ 2024-04-17 15:50 86阅读 0赞

mixins就是混入。  
一个混入对象可以包含任意组件选项。  
同一个生命周期，混入对象会比组件的先执行。  
一个混入自身以一个对象的形式存在，如`var mixin = { }`，它可以包含任意组件选项。在调用方中，调用混入对象使用`mixins: []`，接收一个混入对象的数组，也就是说可以一次混入多个混入对象。

我们一起来看个案例吧

export const mixinsTest = { 
        methods:{ 
            hello(){ 
                console.log("hello");
                
            }
        },
        created(){ 
            this.hello()
        }
    }

2.在组件中引入这个mixins对象，通过mixins:\[xxx\]，使用mixins对象

<template>
    <div>
        home
    </div>
    </template>
    <script>
    import { mixinsTest} from '../util/test.js'
    export default { 
      name: "Home",
      data () { 
        return { 
        };
      },
      created(){ 
          console.log("home");
          
      },
      //mixins的created会先被调用,然后再执行组件的created
      mixins:[mixinsTest]
    }
    </script>

**打印的顺序：**  
hello  
home

补充：

可以混入多个mixins对象

//暴露两个mixins对象
    export const mixinsTest = { 
        methods: { 
            hello() { 
                console.log("hello mixins");
            }
        },
        created() { 
            this.hello();
        },
    }
    
    
    export const mixinsTest2 = { 
        methods:{ 
            hello2(){ 
                console.log("hello2");
            }
        },
        created() { 
            this.hello2();
        },
    }

组件中引入两个mixins对象

<template>
    <div>
        home
    </div>
    </template>
    <script>
    import { mixinsTest,mixinsTest2} from '../util/test.js'
    export default { 
      name: "Home",
      data () { 
        return { 
        };
      },
      created(){ 
          console.log("1212");
      },
      mixins:[mixinsTest2,mixinsTest] // 先调用那个mixins对象，就先执行哪个
     
    }
    </script>
    <style lang="css" scoped>
    </style>

打印的顺序是：  
![在这里插入图片描述][2019082810480742.png]

### 注意： ###

1.  当混入对象的data属性引入时，数据对象在内部会进行递归合并，当发生冲突时，以当前组件数据优先
2.  同名钩子函数混合为一个数组，两个钩子函数内部的逻辑都会被执行，且混入的比组件的先调用
3.  值为对象的选项如methods, components, directives将被 混合为同一个对象。如果引入时和当前组件发生冲突时，当前组件键值对优先级更高，会覆盖引入的混入对象

更高级的部分，目前笔者还没有搞懂  
[https://www.jianshu.com/p/13dc84559c8d][https_www.jianshu.com_p_13dc84559c8d]

本文转载自：

[2019082810480742.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5bff68a71d284582be9b0d8863ee8523.png
[https_www.jianshu.com_p_13dc84559c8d]: https://www.jianshu.com/p/13dc84559c8d