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>