0
点赞
收藏
分享

微信扫一扫

Vue3中hook的简单使用

创建文件夹

在src下创建文件夹。文件名称为hooks。
hooks下的文件夹下,是你的封装的hook;
通过命名为useXXXXXX

usexy.js 文件是封装的获取屏幕的坐标

 import {
onBeforeUnmount,
onMounted,
ref
} from "vue";
export default function () {
let x = ref("0")
let y = ref("0")
// 如果这个文件是ts, e的类型应该是 MouseEvent
let pageHander=function(e){
console.log(e)
x.value=e.pageX;
y.value=e.pageY;
}
// 需要使用生命周期函数,页面加载完成
onMounted(()=>{
window.addEventListener("click",pageHander)
})

// 在页面即将卸载时,移除事件的监听
onBeforeUnmount(()=>{
window.removeEventListener("click",pageHander )
})
return {x,y}
}

使用的页面

<template>
<div>
<p>横坐标{{x}}</p>
<p>纵坐标{{y}}</p>
</div>
</template>
<script>
import getxy from "../src/hooks/usexy.js"
export default {
name: "App",
setup() {
let {x,y}=getxy()
return {x,y}
}
};
</script>

也许大家会觉得这里的hooks。
跟我写一个封装的函数,没有什么区别;
这里来看确实是没有什么太大的区别。

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

作者:晚来南风晚相识

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


举报

相关推荐

0 条评论