美文网首页Vue3
Vue3基础之Mixin(混入,复用)

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

作者: 翟小乙 | 来源:发表于2023-06-26 15:24 被阅读0次

    简述

    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>
    

    相关文章

      网友评论

        本文标题:Vue3基础之Mixin(混入,复用)

        本文链接:https://www.haomeiwen.com/subject/ejzwydtx.html