自定义hooks就类似组件一样只不过只封装js,当有一段js代码需要复用可以把他封装成一个hooks进行复用
需求,在别的页面插入一个hooks实现记录鼠标点击就的坐标
可以在文件中建一个专门写hooks的文件夹可以与 component同级
把需要复用的代码写在这个js文件中
import { reactive } from '@vue/reactivity'
import{onMounted} from 'vue'
export default function(){
let points=reactive({
x:0,
y:0
})
function myclick(event){
points.x=event.pageX
points.y=event.pageY
}
onMounted(()=>{
//点击的是窗口所以要给窗口定义点击事件
window.addEventListener("click",myclick)
})
//这里需要有一个返回值,如果不给返回值接收的是一个函数,接收的是undefind
return points
}
写完了hooks文件就可在别的地方引用了(可以跟别的代码写在一起)