Mixin

分发 Vue 组件中的可复用功能

  • 不同组件使用mixin，mixin里的数据是独立的，组件间不会受影响（A组件使用mixin中的num属性，B组件也是用num属性，A组件修改num的值不会影响B组件引入mixin的num值）
  • 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
  • app.config.optionMergeStrategies：自定义选项合并策略，会影响混入数据和组件内数据显示的优先级。 以下设置，则会使混入数据的优先级高于组件内数据的优先级（针对设置的propeety）
app.config.optionMergeStrategies[property] = (toVal, fromVal) => toVal || fromVal

setup写法

mixin.js

import {ref} from 'vue'
export default function(){
  let  num = ref(1);
  let fav = ref(false);
  let favBtn = ()=>{
    num.value += 1;
    fav.value = true;
    setTimeout(()=>{
      fav.value = false;
        },2000)
    }
    return {num,fav,favBtn}

}

A.vue

<template>
  <div>
    <h1>A组件</h1>
    {{ num }}
    <button @click='favBtn'>
      {{ fav ? '收藏中...' : '收藏' }}
    </button>
  </div>
</template>

<script setup>
import mixin from '../mixins/mixin.js'
let { num , fav , favBtn } = mixin();
</script>

选项式api写法（vue2写法）

mixin.js

export const fav = {
  data () {
    return {
      num:10
    }
  },
  methods:{
    favBtn( params ){
      this.num += params;
    }
  }
}

A.vue

<template>
  <div>
    <h1>A组件</h1>
    {{ num }}
    <button @click='favBtn(1)'>按钮</button>
  </div>
</templat>
<script type="text/javascript">
import { fav } from '../mixins/mixin.js'
export default{
  data () {
    return {
      str:'你好'
    }
  },
  mixins:[fav]
}
</script>