分发Vue组件中的可复用功能,A组件和B组件使用时,mixin.js中定义的数据是独立的。
在src目录下创建mixins文件夹,再创建mixin.js
import {ref } from 'vue'
export default function(){
let num = ref(1);
let fav = ref(false);
let favBtn = ()=>{
num.value++;
fav.value = true;
setTimeout(() => {
fav.value = false;
}, 2000);
};
return{
num,
fav,
favBtn
}
}
组件中使用:
import mixin from '../mixins/mixin.js';
let {num,fav,favBtn} = mixin();//将mixin()返回的属性进行解构
num、fav、favBtn直接在组件中使用