0
点赞
收藏
分享

微信扫一扫

vue3中mixins的使用

小沙坨 2022-09-01 阅读 63
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>

vue3中mixins的使用_微信

解释

从上面的图中发现:
在混合mixin中,各个数据彼此是互相独立的。不会互相影响。

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。


作者:晚来南风晚相识

如果文中有什么错误,欢迎指出。以免更多的人被误导。

举报

相关推荐

0 条评论