vue3-mixins
在开发的过程中我们会遇见相同或者相似的逻辑代码。
可以通过vue的 mixin 功能抽离公共的业务逻辑，
然后通过impor再组件中引入。通过mixins注册进来。
这样我们就可以使用mixin中共同的业务逻辑
我们通常会在src下创建一个文件夹mixins。
然后在创建mixins/index.js文件
index.js
import { ref } from 'vue' export default function () { let num = ref(0); let like = ref(false) let favBtn = () => { num.value += 1; like.value = false setTimeout(() => { like.value=true }) } // 暴露出去 return { num, like, favBtn } }
TestA.vue文件(组件)
<template> <div class="a"> <h1> 我是A组件 </h1> <p>数量{{num }}</p> <el-button @click="favBtn"> {{like ? '收藏过' :'未收藏'}} </el-button> </div> </template> <script setup lang="ts"> import mixins from '../mixins/index.js' let { num, like, favBtn }=mixins() </script>
TestB.vue文件(组件)
<template> <div class="b"> <h1> 我是B 组件 </h1> <p>数量{{num }}</p> <el-button @click="favBtn"> {{like ? '收藏过' :'未收藏'}} </el-button> </div> </template> <script setup lang="ts"> import mixins from '../mixins/index.js' let { num, like, favBtn }=mixins() </script>
使用组件的页面
<template> <div> <TestA></TestA> <TestB></TestB> </div> </template> <script setup lang="ts"> import { reactive, ref,markRaw } from "@vue/reactivity" import TestA from "../components/TestA.vue" import TestB from "../components/TestB.vue" </script>
解释
从上面的图中发现：
在混合mixin中，各个数据彼此是互相独立的。不会互相影响。
