Vue3基础之Mixin(混入，复用)

简述

Mixin来分发Vue组件中的可复用功能。
在项目实际开发中，这个功能应该是最好用的，我们可以通过此功能对不同业务进行分类模块封装，便于后面好维护。
我就简单写一个笔记，在首页调用用函数数据加1，将此封装到单独JS模块中。

步骤

1. 创建mixins
   此文件按模块区分例如home页，logon页，或common公共部分等
2. 每个模块分功能.js
3. 引入

目录

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>