vue3使用钩子代替mixins
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
自用笔记
在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了出来
下面是在组件之中的使用
<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
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)