1.mixins基础概况

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

 

2.mixins的使用方法

2.1.先定义一个mixins，代码如下

export const myMixin = {   data(){     return {       num: 1     }   },   created(){     this.hello()   },   methods:{     hello(){       console.log("hello from mixin")     }   } }

2.2.把定义的mixins引入到组件中，代码如下

<template>
  <div class="template1">
    组件1
  </div>
</template>

<script>

  import { myMixin } from "./mixins/index.js";

export default {
  mixins:[myMixin]
}


</script>

 

3.mixins的特点

3.1.引入的mixins中的方法和参数在每一个使用组件中不共享

3.1.1.mixins对象中的参数

export const myMixin = {
  data(){
    return {
      num: 1
    }
  },
  created(){
    this.hello()
  },
  methods:{
    hello(){
      console.log("hello from mixin")
    }
  }
}

 

 

3.1.2.组件1引用mixins对象参数（把num参数加了1）

<template>
  <div class="app-container">
    <div class="template1">
      template1里面的num：{{num}}
    </div>
  </div>
</template>

<script>
import { myMixin } from "./mixins/index.js";
export default {
  mixins:[myMixin],
  created(){
    this.num++
  }
}
</script>

<style scoped>
.template1{
  font-size:28px;
  color:red;
}
</style>

 

3.1.3组件2引用mixins对象参数（没有做任何处理）

<template>
  <div class="app-container">
    <div class="template2">
      template2里面的num：{{num}}
    </div>
  </div>
</template>

<script>
import { myMixin } from "./mixins/index.js";
export default {
  mixins:[myMixin],
}
</script>

<style scoped>
.template2{
  font-size:28px;
  color:blue;
}
</style>

3.1.4.总结

组件1：组件1里面处理了num参数，num参数变成处理后的值

组件2：组件2没有处理num参数，组件2里面的num参数还是mixins里面的值，没有发生任何改变

3.2.引入的mixins中的对象，如methods、components等，

3.2.1.mixins中的对象会组件里面的对象合并。对象里面的键名出现冲突的情况，组件的对象键会覆盖掉mixins中的对象键