vue3使用钩子代替mixins

自用笔记

在vue2中,mixins可以用来混入一些复用的函数,变量等等,在vue3版本中,特别是组合式的写法之中可以用钩子的方式来代替这一功能。

写一个复用的控制盒子展示或者隐藏的钩子useOpen

import {ref} from "vue"
export function useOpen(){
    // 创建控制变量
    const isOpen=ref(true)
    let TriggleBox=()=>{
        isOpen.value=!isOpen.value
    }
    return {isOpen,TriggleBox}
}

钩子中创建了一个ref变量,并创建了一个改变该变量的方法,然后return了出来

下面是在组件之中的使用



ok

你可能感兴趣的:(vue实践,vue.js,javascript,前端)