Vue混入mixin介绍

水深无声 2021-07-25 02:05 504阅读 0赞

**目录**

Vue混入mixin介绍

一、局部组件混入

二、全局组件混入

三、内容冲突，听谁的

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

# Vue混入mixin介绍 #

mixin官方解释：

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

通俗解释：

日常开发中，经常会遇到不同组件中会出现需要一些相同的或者相似的代码，这些代码的功能相对独立。可以利用vue的mixin将功能相同的或者相似的提出来，方便代码复用，也有利于代码维护。

# 一、局部组件混入 #

1、新建混入js文件

一般在工程中新建一个mixin文件夹，专门保存各种混入。一般src/mixin/demo.js

一般混入的格式就是一个js文件，需要export default \{\} 输出，其里面的具体格式，需要根据具体的混入场景来制定。比如需要混入vue文件里面，则需要根据vue文件的应用场景来设置。

export default {
        data(){
          return {
            msg:"这是mixin的数据",
            mixinMsg:"这是mixin的数据",
          }
        },
        created(){
          console.log(123)
        },
        methods:{
          onClick(){
            console.log('触发了mixin中的onClick')
          }
        }
    }

2、组件中引入并使用，组件中只需要配置mixins即可。

结果展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

# 二、全局组件混入 #

在初始化vue之前，调用Vue.mixin()进行全局混入。

在main.js中：

Vue.mixin({
      data(){
        return {
          $_globalMsg:"全局mixin数据"
        }
      },
      created(){
        console.log('触发全局mixin的Created')
      },
      methods:{
        $_globalMixin(){
          console.log('$_globalMixin')
        }
      }
    })

# 三、内容冲突，听谁的 #

如果局部混入和调用的组件中，关于同一个内容，使用出现了冲突：

组件中定义如下：

<template>
      <div class='container'>
        <div>{
       {msg}}</div>
        <div>{
       {mixinMsg}}</div>
        <div @click="onClick"> 点一下 </div>
      </div>
    </template>
    
    <script>
    import mixin from '@/mixin/demo.js';
    export default {
      mixins:[mixin],
      data () {
        return {
          msg: '组件中的数据'   //组件和混入都定义了
        }
      },
      created(){
        console.log('组件内的created') //组件和混入都定义了
      },
      methods: {
        onClick(){
          console.log('触发了组件中的onClick')    //组件和混入都定义了
        }  
      },
    }
    </script>

**结果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1][]

**冲突优先权，规则如下：**

*  data中的属性在键值发生冲突的时候，会以组件中的数据优先
 *  同名钩子函数将被合并为一个数组，会依次调用，混合对象的钩子函数将在组件滋生钩子函数之前调用
 *  值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突的时候，组件对象的键值优先。
 *  组件 > 局部mixin > 全局mixin

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/dc9937dd7d9c41e9b0d7ed4e6d112e53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1]: /images/20210724/d51c934984cb4449bb05a121e424abb9.png