详解vue混入(mixin)在项目中的使用

旧城等待， 2022-10-22 14:54 194阅读 0赞

# 一. 什么是混入（mixin）？ #

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

# 二. 如何在项目中使用混入？ #

在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。  
我们可以创建一个目录`mixins`，在创建一个`common.js`文件如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]

## 定义混入对象 ##

common.js 就是我们要混入其它组件的内容：

export default { 
      data() { 
        return { }
      },
      created() {  //钩子函数
        console.log('这是混入的组件')
        this.hello();
      },
      methods: { 
        hello() { 
          console.log('hello! 混入test');
        },
      }
    }

## 在组件中使用混入 ##

在test2.vue文件中导入common.js文件，用mixins把common.js内容混入当前组件

<template>
      <div>
      </div>
    </template>
    
    <script>
    import mixinTest from "../../mixins/common.js";
    export default { 
      mixins: [mixinTest],
      data() { 
        return { 
          level: "1",
        };
      },
    };
    </script>
    
    <style lang="scss" scoped>
    </style>

## 效果 ##

![在这里插入图片描述][20210317185810458.png]

# 三. 深入学习混入之选项合并 #

混入的使用注定会遇到混入对象和使用混入对象的组件在选项上重名的问题。

当组件和混入对象含有同名选项时，vue会通过“合并”的方式恰当的解决，方法如下：

*  **数据对象**在内部会进行递归合并，并在发生冲突时**以组件数据优先**。
 *  **同名钩子函数**将合并为一个数组，因此**都将被调用**。另外，**混入对象的钩子将在组件自身钩子之前调用。即：混入对象钩子时机>组件自身钩子**
 *  值为对象的选项，例如 `methods`、`components` 和 `directives`，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

# 四. 注意事项 #

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (**包括第三方组件**)。

# 参考 #

[https://blog.csdn.net/weixin\_46071217/article/details/108742358][https_blog.csdn.net_weixin_46071217_article_details_108742358]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: /images/20221022/cf4dc99e64b647a2886e0440fa63ecac.png
[20210317185810458.png]: /images/20221022/f435d4c491874406af1720d03bdc0ea8.png
[https_blog.csdn.net_weixin_46071217_article_details_108742358]: https://blog.csdn.net/weixin_46071217/article/details/108742358