vue项目中使用mixins详解

梦里梦外; 2023-02-17 02:17 57阅读 0赞

### 一，混入mixins ###

### 1-1，什么是mixins? ###

混入（mixins）是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

mixins可以简单理解成常见函数封装，也可以进行一些业务逻辑的拆分，组合。也有一定的风险。

### 1-2，混入方式 ###

组件按需混入，全局混入。

### 二，结构 ###

//定义一个混入对象js
    
    var myMinxins={
       data(){
         return{
         }
       },
       created(){},
       mounted(){    
       },
       methods:{
        hello(){
      console.log('hello from mixins');
    }
       }
    }
    
    
    
    //定义一个使用混入对象的组件
    
    var Component=Vue.extend({
     mixins:[myMinxins]
    })

### 三，选项合并 ###

### 3-1混入的data中，健名相同，则读取组件中的键名，反之则读取混入键名； ###

1）键名相同

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

两个键名相同（msg）,则只会读取组件中的键名 ：

![20200610183704414.png][]

2） 键名不同

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]  两个键名不相同,则会读取调用的键名 ：

![20200610183900890.png][]

### 3-2，钩子：同名钩子函数将混合为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2][]

先输出混入对象的钩子：

![20200610184432390.png][]

### 3-3，值为对象的混入：如methods,components等，选项会被合并，组件对象覆盖混入对象。 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3][]

调用的方法名一样，组件对象覆盖混入对象 的方法：

![20200610185913904.png][]

### 四，全局混入 ###

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响**每一个**之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

在main.js引入：

import tableLoadData from "@/mixins/tableLoadData"
    
    Vue.use(tableLoadData )

谨慎使用，它会影响Vue实列（包括第三方组件）

全局混入

immediate:true
    
    deep:true

官网：[https://cn.vuejs.org/v2/guide/mixins.html][https_cn.vuejs.org_v2_guide_mixins.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200610183417366.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20200610183704414.png]: https://img-blog.csdnimg.cn/20200610183704414.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200610183849295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20200610183900890.png]: https://img-blog.csdnimg.cn/20200610183900890.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200610185334216.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20200610184432390.png]: https://img-blog.csdnimg.cn/20200610184432390.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200610185859712.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20200610185913904.png]: https://img-blog.csdnimg.cn/20200610185913904.png
[https_cn.vuejs.org_v2_guide_mixins.html]: https://cn.vuejs.org/v2/guide/mixins.html