自用笔记
在vue2中，mixins可以用来混入一些复用的函数，变量等等，在vue3版本中，特别是组合式的写法之中可以用钩子的方式来代替这一功能。
写一个复用的控制盒子展示或者隐藏的钩子useOpen
import {ref} from "vue"
export function useOpen(){
// 创建控制变量
const isOpen=ref<boolean>(true)
let TriggleBox=()=>{
isOpen.value=!isOpen.value
}
return {isOpen,TriggleBox}
}钩子中创建了一个ref变量，并创建了一个改变该变量的方法，然后return了出来
下面是在组件之中的使用文章来源：https://www.toymoban.com/news/detail-629840.html
<template>
<div :class="['box',isOpen?'show':'hide']"></div>
<button @click="TriggleBox">open box</button>
</template>
<script setup lang="ts">
import { useOpen } from "@utils/useOpen";
let {isOpen,TriggleBox}=useOpen()
</script>
<style lang="scss" scoped>
.box{
width:100px;
height:100px;
background-color: palevioletred;
}
.show{
display:block;
}
.hide{
display: none;
}
</style>ok文章来源地址https://www.toymoban.com/news/detail-629840.html
到了这里，关于vue3使用钩子代替mixins的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
