智慧团建信息系统网站,为了推出企业网站建设,wordpress密码$,wordpress 主题根目录目录 自定义hook函数
例如#xff1a;
src下新建文件夹 hooks
创建js文件#xff0c;文件名为 usePoint.js
在 App.vue 中
Demo.vue 组件中
Test.vue 组件中 自定义hook函数
什么是 hook ?——本质是一个函数#xff0c;把 setup 函数中使用的 Composition API 进行…目录 自定义hook函数
例如
src下新建文件夹 hooks
创建js文件文件名为 usePoint.js
在 App.vue 中
Demo.vue 组件中
Test.vue 组件中 自定义hook函数
什么是 hook ?——本质是一个函数把 setup 函数中使用的 Composition API 进行了封装。类似于 vue2 中的 mixin。自定义hook的优势复用代码让 setup 中的逻辑更清楚易懂。
例如
src下新建文件夹 hooks
创建js文件文件名为 usePoint.js
在 usePoint.js 中封装一个鼠标点击“打点”的函数 savePoint
import {reactive,onMounted,onBeforeUnmount} from vue
function savePoint(){//实现鼠标‘打点’相关的数据let point reactive({x:0,y:0})//实现鼠标‘打点’相关的方法function savePoint(event){point.x event.pageXpoint.y event.pageYconsole.log(event.pageX,event.pageY)}//实现鼠标‘打点’相关的生命周期钩子onMounted((){window.addEventListener(click, savePoint)})onBeforeUnmount((){window.removeEventListener(click, savePoint)})//一定要返回否则无法使用pointreturn point
}export default savePoint
在 App.vue 中
用到了两个组件分别是Demo.vue 和 Test.vue
templatebutton clickxianshi !xianshi点我移除Demo/buttonDemo v-ifxianshi/DemohrTest/Test
/templatescriptimport {ref} from vueimport Demo from ./components/Demo.vueimport Test from ./components/Testexport default {name: App,components:{Demo,Test},setup(){let xianshi ref(true)return {xianshi}}}
/scriptDemo.vue 组件中
引入封装好的 usePoint.js 可以直接使用返回的 point
templateh2当前求和为{{sum}}/h2button clicksum点我1/buttonhrh2当前点击时鼠标的坐标为x{{point.x}}y{{point.y}}/h2/templatescript
import {ref,reactive,onMounted,onBeforeUnmount} from vue
import usePoint from ../hooks/usePoint
export default {name: Demo,setup() {//数据let sum ref(0)let point usePoint()//返回一个对象(常用)return {sum,point}}
}
/scriptTest.vue 组件中
引入封装好的 usePoint.js 可以直接使用返回的 point
templateh2我是Test组件/h2h3姓名张三/h3h3鼠标点击的坐标x{{point.x}}y{{point.y}}/h3
/templatescript
import {ref} from vue
import usePoint from ../hooks/usePoint
export default {name: test,setup(){let name ref(张三)let point usePoint()return{name,point}}
}
/scriptstyle scoped/style
