9.0 vue3 自定义hook函数
Vue3 函数 自定义 hook 9.0
2023-09-11 14:22:28 时间
上一篇:
vue3生命周期https://blog.csdn.net/qq_42543244/article/details/122398873?spm=1001.2014.3001.5501今天主要需要记录vue3的自定义hook函数,vue3自定义hook函数与vue2的mixin是有点相似的,
进行代码的复用。为了更好的演示,我写了两个测试的子组件。
父组件:
<template>
<button @click="isShow = !isShow">切换组件</button>
<demo v-if="isShow"></demo>
<test v-else></test>
</template>
<script>
import { ref } from "vue";
import Demo from "@/components/Demo.vue";
import Test from "@/components/Test.vue";
export default {
name: "App",
components: {
Demo,
Test,
},
setup() {
let isShow = ref(true);
return {
isShow,
};
},
};
</script>
子组件 Demo.vue
<template>
<div>Demo组件内容</div>
<h2>当前鼠标点击的位置坐标x:{{ point.x }} , y:{{ point.y }}</h2>
</template>
<script>
/*
hooks的本质就是一个函数,把setup函数中使用的composition api进行了封装
类似于vue2中的mixin
自定义hook的优势:复用代码,让setup中的逻辑可以更加的清晰
*/
import userPoint from "@/hooks/userPoint";
export default {
name: "Demo",
setup() {
let point = userPoint();
return { point };
},
};
</script>
子组件 Test.vue
<template>
<div>Test组件内容</div>
<h2>test:当前鼠标点击的位置坐标x:{{ point.x }} , y:{{ point.y }}</h2>
</template>
<script>
import userPoint from "@/hooks/userPoint";
export default {
name: "Test",
setup() {
let point = userPoint();
return { point };
},
};
</script>
userPoint.js (也就是我们自定义的hook函数)
import {
reactive,
onMounted,
onUnmounted
} from "vue";
export default function () {
let point = reactive({
x: 0,
y: 0,
});
function getPageXY(event) {
point.x = event.pageX;
point.y = event.pageY;
}
onMounted(() => {
window.addEventListener("click", getPageXY);
});
onUnmounted(() => {
window.removeEventListener("click", getPageXY);
});
return point
}
下一篇:
vue3 toRef&toRefshttps://blog.csdn.net/qq_42543244/article/details/122715199
相关文章
- 43 JS+Vue3制作动画和钩子函数
- 【Vue】Vue3脚手架使用font-awesome字体图标的解决方案
- 【Vue3】Vue3中的hooks函数示例(图文+代码)
- 【Vue】Vue2和vue3路由的安装及页面切换简单示例(图文+完整源代码)
- 【Vue | vue3】Vue2和Vue3中Element-Ui 的安装与使用
- vite&vue3中使用批量导入 import.meta.glob import.meta.globEager
- 极简Vue3教程--Pinia状态管理
- vue2和vue3插件的区别
- Vue2.7正式发布,终于可以在Vue2项目中使用Vue3的特性了,真香~
- 上手体验Vue3 Vite的魅力(“快”的艺术),有了它,你还会用webpack吗?
- Vue3新特性体验--中(Composition API)
- Vue3 快速入门及巩固基础
- 从Vue2 到 Vue3,这些路由差异你需要掌握!
- Vue3+elementplus搭建通用管理系统实例十:动态表单及详情页实现上
- Vue3+elementplus搭建通用管理系统实例三:登录流程实现
- vue3 class与style绑定 与 script setup使用
- vue3响应式reactive的实现原理;proxy深层代理;vue3响应式api
- Vue3入门到精通--reactive以及reactive相关函数
- Vue3实践指南:使用reactive函数声明数组如何正确赋值响应式、script setup语法糖中toRefs如何优雅呈现、Options API 与 Composition API 如何选择及混用是否对性能有影响、关于 setup 中没有 this 的问题及 setup 的执行时机
- vue3中的双向绑定 proxy
- vue3组合API注意点(系列三)
- Vue开发实例(06)之Vue3注册Element-ui报错解决
- 26 vue3 Pinia的安装配置
- 5.0 vue3 watch监听函数 (ref篇)
- vue3中部分api(生命周期等hook)只能在setup中使用,如何实现的