vue3中的hook公共函数封装及运用

vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,或者说是一些可以复用的公共方法/功能

  • 使用Vue3的组合API封装的可复用的功能函数
  • 自定义hook的作用类似于vue2中的mixin技术
  • 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂

1、封装一个hooks
hooks/myHook.ts

	import { reactive } from 'vue'export function screenWH() {  // 导出一个默认方法// 创建一个对象,保存宽度和高度值const screen = reactive({width: 0,height: 0})// 创建一个方法,获取可视化界面的宽度和高度值const getWH = () => {screen.width = document.documentElement.clientWidthscreen.height = document.documentElement.clientHeight}return { screen, getWH }  // 方法返回宽高值}

2、运用封装的hook

	<template><h3>hooks公共方法封装</h3><p>页面宽度: {{screen.width}}</p><p>页面高度: {{screen.height}}</p><a-button @click="getWH">获取页面的宽高</a-button></template><script  lang="ts" setup>import {screenWH} from "../hooks/index"let { screen, getWH } = screenWH()</script><style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/615590.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NetCore部署微服务(三)

接上文&#xff0c;服务端部署完成之后&#xff0c;同样我们也需要修改一下客户端代码 Blocking Queries 1.1 服务发现 在客户端代码中使用Nuget安装consul包 修改配置文件&#xff0c;我们首先需要把consul的请求地址配置在配置文件中 修改control方法 using Consul; usin…

复选框QCheckBox和分组框QGroupBox

1. 复选框&#xff1a;QCheckBox 实例化 //实例化 // QCheckBox* checkBox new QCheckBox("是否同意该条款",this);QCheckBox* checkBox new QCheckBox(this);1.1 代码实现 1.1.1 复选框的基本函数 复选框选中状态的参数 Qt::Unchecked //未选中状态 Qt::Part…

学习C指针

指针基本介绍 计算机中的每个内存都有地址 整型分配4字节&#xff0c;字符分配1字节 &#xff0c;浮点数分配4字节 指针是一个变量&#xff0c;它存放着另外一个变量的地址 int a; int *p; p &a;// a 5; printf(p) //get a address print &a //get a address …

chatgpt免费使用的网站

前言 如果您认为本文对你有帮助&#xff0c;希望可以点赞收藏&#xff01;感谢您的支持 下面我为你推荐我自己在用的gpt类工具&#xff0c;帮你在工作学习生活上解决一些大小问题 &#x1f389;智能GPT 地址&#xff1a; https://meet.adminjs.net 在他的详情中有详细的使用…

半监督学习 - 自训练(Self-training)

什么是机器学习 半监督学习中的自训练&#xff08;Self-training&#xff09;是一种利用已标记数据和未标记数据进行模型训练的方法。以下是自训练的详细教程&#xff1a; 步骤一&#xff1a;准备数据集 标记数据集&#xff1a; 收集和标记一小部分数据&#xff0c;用于有监…

Pandas实战100例 | 案例 21: 条件运算

案例 21: 条件运算 知识点讲解 在 Pandas 中进行条件运算可以用于创建新的列或修改现有的列,基于一定的条件逻辑。这些运算通常结合布尔索引或 apply 方法进行。 布尔条件运算: 可以根据列之间的比较生成布尔值列。apply 方法进行条件运算: 使用 apply 方法可以在 DataFrame…

ubuntu18.04.6 搭建mqtt服务器emqx 之docker方式

ubuntu18.04.6 搭建mqtt服务器emqx 之docker方式 前提docker环境已经安装好 如未安装&#xff0c;请参考博文https://blog.csdn.net/a554521655/article/details/134251763 文章目录 ubuntu18.04.6 搭建mqtt服务器emqx 之docker方式安装emqx查看是否安装并启动成功登录前端查 安…

电动车充气泵方案芯片应用设计

技术工程师在做产品方案开发之前&#xff0c;首先也是最重要的就是芯片选型。为什么这样说呢&#xff1f;那是因为芯片是整个方案设计中&#xff0c;最至关重要的一环&#xff0c;没有它&#xff0c;后面的工作将无法进行&#xff0c;只有将芯片核心基础定下来&#xff0c;后面…

FastAdmin西陆教育系统(xiluEdu)开源代码

应用介绍 一款基于FastAdminThinkPHPUniapp开发的西陆教育系统&#xff08;微信小程序、移动端H5、安卓APP、IOS-APP&#xff09;&#xff0c;以下是教育系统所包含的一些功能&#xff1a; 视频课程&#xff1a;教育系统提供在线视频课程&#xff0c;学生可以通过网络观看教师…

每日一题——LeetCode1154.一年中的第几天

方法一 列举法&#xff1a; 用一个数组把每个月份的天数都列举出来 判断闰年&#xff0c;是闰年2月份有29天 循环对当前月份之前的月份天数求和 加上当天月份的天数 var dayOfYear function(date) {let year date.slice(0, 4);let month date.slice(5, 7);let day dat…

Android 13 辅助屏导航栏不显示问题

问题 在Android 13 上开启辅助屏幕。但是发现辅助屏systemui 导航按 icon没有显示,但是点击对应的区域有作用 分析 可以用 anroid device monitor 工具分析视图 解决 public NavigationBarView(Context context, AttributeSet attrs) {super(context, attrs);//add star…

Python 开源 Web 应用框架 Django 简介 应用场景 优势 不足

简介 Django 是一个开放源代码的 Web 应用框架&#xff0c;使用 Python 编程语言编写。它遵循了 “MTV”&#xff08;模型-模板-视图&#xff09;的设计模式&#xff0c;旨在帮助开发者快速构建高质量、易维护的 Web 应用程序。 应用场景 Web 应用开发&#xff1a;Django 适…

【一、测试基础】Java基础语法

Java 的用法及注意事项有很多&#xff0c;今天的目标是了解Java基础语法&#xff0c;且能够输出"hello world" 几个基础的概念 对象&#xff1a;对象是类的一个实例&#xff0c;有状态和行为。一只猫是一个对象&#xff0c;猫的状态有&#xff1a;颜色、名字、品种&…

公众号突破2个限制技巧怎么操作?

一般可以申请多少个公众号&#xff1f;目前企业主体只能申请2个公众号&#xff0c;这也意味着想做矩阵公众号的难度提升了。有些公司靠着诸多不同分工的公众号形成一个个矩阵&#xff0c;获取不同领域的粉丝。比如&#xff0c;目前主体为xx旗下公众号&#xff0c;共有30个&…

《动手学深度学习》学习笔记 第9章 现代循环神经网络

本系列为《动手学深度学习》学习笔记 书籍链接&#xff1a;动手学深度学习 笔记是从第四章开始&#xff0c;前面三章为基础知识&#xff0c;有需要的可以自己去看看 关于本系列笔记&#xff1a; 书里为了让读者更好的理解&#xff0c;有大篇幅的描述性的文字&#xff0c;内容很…

【自控实验】1. 线性系统串联超前校正实验

本科课程实验报告&#xff0c;有太多公式和图片了&#xff0c;干脆直接转成图片了 仅分享和记录&#xff0c;不保证全对 串联超前校正实验&#xff1a;频域设计计算(校正装置)&#xff0c;时域观察验证(校正结果) 使用matlab中的simulink进行仿真

PyCharm中配置安装PyQt5、QtDesigner

PyCharm中配置安装PyQt5 使用 pip install PyQt5 命令安装。 安装pyqt5-tools&#xff1a;pip install pyqt5-tools 安装PyQt5Designer&#xff1a;pip install PyQt5Designer 上述三个都安装好之后&#xff0c;输入 pip list 查看一下 有如下内容就安装成功啦&#xff01;…

BIO、NIO、AIO 有什么区别?

Java 中的I/O模型主要分为三类&#xff1a;BIO&#xff08;Blocking I/O&#xff09;、NIO&#xff08;New I/O&#xff09;和AIO&#xff08;Asynchronous I/O&#xff09;。它们在处理I/O操作时有着不同的工作方式和特点。 1. BIO&#xff08;Blocking I/O&#xff09; BIO…

mysql 字符串分割

目录 前言substring_indexsubstring_index 特性字符串分割 前言 略 substring_index 正向截取字符串 mysql> select substring_index(www.baidu.com,.,1); ---------------------------------------- | substring_index(www.baidu.com,.,1) | -------------------------…

【Linux Shell】5. 运算符

文章目录 【 1. 算术运算符 】1.1 expr 命令1.2 [ ] 方括号 【 2. 关系运算符 】【 3. 布尔运算符 】【 4. 逻辑运算符 】【 5. 字符串运算符 】【 6. 文件测试运算符 】 【 1. 算术运算符 】 运算符说明举例赋值a$b 把变量 b 的值赋给 a。 1.1 expr 命令 原生 bash 不支持简…