Vue混入mixin介绍

目录

 

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即可。

<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],   //这里引入mixin
}
</script>

结果展示：

二、全局组件混入

在初始化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>

结果如下：

冲突优先权，规则如下：

• data中的属性在键值发生冲突的时候，会以组件中的数据优先

• 同名钩子函数将被合并为一个数组，会依次调用，混合对象的钩子函数将在组件滋生钩子函数之前调用

• 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突的时候，组件对象的键值优先。

• 组件 > 局部mixin > 全局mixin