简述
Mixin来分发Vue组件中的可复用功能。
在项目实际开发中,这个功能应该是最好用的,我们可以通过此功能对不同业务进行分类模块封装,便于后面好维护。
我就简单写一个笔记,在首页调用用函数数据加1,将此封装到单独JS模块中。
步骤
- 创建mixins
此文件按模块区分例如home页,logon页,或common公共部分等 - 每个模块分功能.js
- 引入
目录
3.png代码
- 功能mixin模块
import { ref } from "vue";
export default function(){
let num = ref(1)
let addNum = ()=>{
num.value++
}
return {
num,
addNum
}
}
- vue引用
<template>
<div>
<div class="div1">
<button @click="addNum">
添加
</button>
<span>数据是:{{num}}</span>
</div>
</div>
</template>
<script setup>
import mixin from '../mixins/home/add-mixn.js'
const {addNum ,num} = mixin();
</script>
网友评论