vue3中当子组件使用defineProps时，如何使用hook函数进行拆分整理代码？

最新推荐文章于 2024-07-09 21:41:07 发布
最新推荐文章于 2024-07-09 21:41:07 发布
阅读量2.9k 收藏 3
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nonametoreurn/article/details/128420687
版权
博客介绍了在Vue3中，如何在拆分代码为hook函数的同时处理子组件的defineProps和defineEmits。通过在setup函数中调用hook，并传入props和emits参数，实现了代码的组织和复用，保持了组件的正常工作。
摘要由CSDN通过智能技术生成

最近编写vue3代码，遇到一个小问题，记录一下。

首先说一下两个前提，一：vue3中使用hook函数可以对vue文件中的代码进行拆分整理便于维护，二：vue3中defineProps和defineEmits只能在setup中使用。我们设想一种情况，当子组件使用了defineProps和defineEmits去接受父组件的数据或者触发父组件的方法，而我们又想要去拆分这部分代码写成一个hook函数那么该如何处理呢？

直接上图：

 

 解决方法是：直接在setup所处的script文件中，调用hook函数，然后将props和emits作为实参传入，之后就能够正常编写剩余代码了。

Nonametoreurn
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3电影中后台开发纪实（九）：项目简历与面试
欧阳桫的技术博客
12-17 1716
刀锋电影管理端是刀锋电影App与刀锋电影小程序的中后台管理端程序；包含用户管理、数据看板、在映影片管理、预告管理、城市管理、影院管理、订单管理、运营管理、售后客服等模块；运营人员通过该系统可以创建与维护系统用户、管理用户权限、发布影片与影院信息、创建运营活动、跟踪用户订单、提供售后服务等；
『精』Vue 组件如何模块化抽离Props
贤哲XianZhe的博客
11-04 876
假如有这么一个用于签名的组件，能够控制画笔的大小、颜色、画布背景颜色宽高、按钮的文案提示等，那么它的属性必定是有十几个选项，假设 800 行代码里可能就得花费 100 行去声明这些属性，这明显是不合适的。从优化的角度上看，Vue 的Props声明方式都是一样的，同样的代码写多次显得有些冗余，那不妨将这些 Props 声明再次优化一下，编写一个公共的 Props 辅助工具进行声明。其实 ElementUI 的源码也是这么去做的，以 el-empty 组件为例，源码中对于属性的分离是这么写的。
vue(三)—组件与组件的拆分
Sunday97的博客
05-26 5082
组件分为全局组件和局部组件，每个vue的组件都是vue实例，每个vue实例也都是组件， 组件定义后就可以多次的拿来当模板用 每个组件里面都有一个模板属性template,data属性，methods属性，以及传参的属性props等，而最大的组件即Vue实例没有将template属性写出来时它默认的是template的值是它所绑定的挂载点下的所有内容 1、全局组件 用法如下： <div ...
【vue3|第14期】深入Vue3自定义Hooks：掌握组件逻辑复用的核心
Commas的博客
06-28 1526
在 Vue3 的世界中，自定义 Hooks 本质上是一段具有复用性的代码，为我们带来了更强大的功能和更优雅的代码组织方式。它犹如一把锋利的“钩子”，在组件的构建过程中插入所需的逻辑。通过 Composition API 提供的灵活 API 设计，自定义 Hooks 能够将组件中的逻辑代码巧妙地包装起来，实现在多个组件之间共享和复用，极大地提升了开发效率和代码的可维护性。
vue3 自定义hook函数 和 toRef
lzfengquan的博客
06-14 330
如果有多个的对象，可以直接用 toRefs(‘一个参数’)/ 使用可以用 …toRefs(‘参数’) 代码实例 我们假设及时获取页面鼠标位置即打点。 如果要是有人要用这个组件就要变化，进行封装 然后封装一下 在引入下 toRef...
学习笔记-Vue3中Hook函数
零正催照
05-11 1613
在这类框架中，如果一个变量的变化不会引起视图变化，则为普通变量，如果一个变量已经被框架注册为状态，那么这个变量的变化就会引起视图变化，我们称之为响应式变量。这时，如果多个页面都同时需要的话，你复制这段代码跑来跑去，而且，你要知道的是，每个页面中的onMounted跟onUnmounted都不一定是空的，并且，变量的命名上，都有可能出现重复的情况发生。但在以往，在前端原生开发中，我们所封装的函数，大多数是"无状态"的，不能够建立数据与视图之间的联系。是，这也是我在学习过程中很疑惑的点，来看看下面的解释吧！
@hook-监听子组件生命周期（vue）
weixin_55182699的博客
11-21 1597
vue-hooks是简化组件定义、复用状态逻辑的一种最新尝试，且结合 Vue 实例的特点提供了适用的 Hooks，hooks.js中的this为当前vue实例 1.@hook的使用 在子组件用@hook：+对应的子组件生命周期，再给定一个方法如下的‘moutedEvent’，那我们就能把我们的业务逻辑写在方法里面即可。 <template> <div> <Chilid @hook:mouted="moutedEvent"></Chilid>
Vue3基础(26)___defineProps、defineEmits、defineExpose、defineModel组件通信、defineOptions
见贤思齐焉，见不贤内自省
11-16 4162
Vue3基础(26)___defineProps、defineEmits、defineExpose组件通信
vue3的Composition API详解，包含hook的思想
丑小鸭变黑天鹅的博客
04-14 2324
vue3的Composition API详解一、Options API的弊端二、认识Composition API三、setup1、setup函数的参数2、setup函数的返回值3、setup不可以使用this4、Reactive API5、Ref API1、基本使用2、Ref自动解包6、readonly1、认识readonly2、readonly的使用3、readonly的应用 一、Options API的弊端 在Vue2中，我们编写组件的方式是Options API Options API的一大特点就
Vue3 Hook 到底是啥黑魔法？
qq_42241862的博客
07-29 857
早就听说，React社区，已经全面拥抱Hook。Vue3的发布也支持了自定义Hook，作为只会Vue的前端小码农自然要去看看Vue3 Hook到底是啥黑魔法？ 个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com 从不了解React Hook的角度来看一下啥是Hook？ Vue 官方给出的自定义 Hook 的例子是这样的： import { ref, onMounted, onUnmounted } from "vue"; export function useMous
vue框架使用
qq_45645848的博客
01-11 1111
前端vue基础知识总结，汇总
基于 Vue3打造前台+中台通用提效解决方案（上）
oschina_41559824的博客
03-04 1484
本项目使用 + 来实现前中台解决方案因为，之前的项目一直都是使用作为构建工具；出来这么久了，也没有用过；所以想在当前项目下进行使用；webpack vite 2.2、这么快会有什么问题吗？ 如果大家对的构建机制有了解的话，那么应该可以发现一个问题。 那就是**既然以原生的方式为浏览器提供源码，让浏览器接管了打包的部分工作**，那么假如我们的项目中存在 的内容怎么办?是不是就意味着无法解析呢? 是的! 在 的早期版本中，确实存在这个问题，这个问题导致的最核心的麻烦就是很多的依赖无法使用。 比如 因为
【Vue3】Props的使用详解
null18的博客
03-03 2550
在Vue3中，Props是一种用于从父组件向子组件传递数据的重要机制。Props可以让我们以声明式的方式将数据传递到子组件，使得组件之间的通信更加简单和可靠。本文将详细介绍Vue3中Props的用法通过上述内容，我们可以看到在Vue3中如何使用Props来实现父子组件之间的数据传递，并掌握了Props的基本用法、属性验证、默认值设置等技巧。Props是Vue3中非常重要的一个特性，熟练掌握Props的使用将有助于我们更好地构建可复用、灵活的组件挑战与创造都是很痛苦的，但是很充实。
react 父子组件通信（class组件、hooks组件）
luckydog
01-07 1612
当在子组件中调用onRef函数时，正在调用从父组件传递的函数。this.props.onRef（this）这里的参数指向子组件本身，父组件接收该引用作为第一个参数：onRef = {ref =>（this.child = ref）} 然后它使用this.child保存引用。之后，可以在父组件内访问整个子组件实例，并且可以调用子组件函数。组件间通信除了props外还有onRef方法，不过React官方文档建议不要过度依赖ref。
Vue 3中的defineProps特性：让组件属性定义更简洁
最新发布
你若盛开，清风自来
07-09 1223
Vue 3中的defineProps特性使得组件属性的定义更加简洁和直观，提高了代码的可读性和可维护性。本文将详细介绍defineProps的使用方法，并通过实例展示其优势。Vue 3中的defineProps特性使得组件属性的定义更加简洁和直观，提高了代码的可读性和可维护性。在实际项目中，使用defineProps可以使得组件更加灵活和易于维护。
vue3中使用defineComponent封装hook实现模板复用
小马甲
12-29 1075
vue3中使用defineComponent封装hook实现模板复用
Vue3+ts(day05：ref、props、生命周期、hook)
weixin_51591826的博客
05-02 689
Vue3+ts中的ref、props、生命周期、hook
Vue高阶组件、mixin、prop、hook
lightning_fawn的博客
07-21 1370
Vue高阶组件一、什么是高阶组件二、高阶组件有什么特性三、举个例子四、mixin 混入五、prop六、hook 一、什么是高阶组件 高阶组件(HOC)是 React 生态系统的常用词汇，React 中代码复用的主要方式就是使用高阶组件，并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins，并且在 Vue 中很少提到高阶组件的概念，这是因为在 Vue 中实现高阶组件并不像 React 中那样简单，原因在于 React 和 Vue 的设计思想不同，但并不是说在 Vue 中就不能使用高阶
vue3 组合函数中 使用 defineProps
09-22
在Vue3的组合函数中，使用defineProps可以定义子组件接收的props参数。defineProps有多种使用方法，如下所示： 1. 方法1： ```javascript const props = defineProps(["width", "height"]); ``` 这种方法通过数组传递props参数的名称，可以直接从父组件中接收相应的值。 2. 方法2： ```javascript const props = defineProps({ width: { type: String, default: "100px" }, height: { type: String, default: "" } }); ``` 这种方法通过对象传递props参数的详细定义，可以指定参数的类型和默认值。 3. 方法3： ```javascript interface Props { width: string; height: string; } const props = defineProps<Props>(); ``` 这种方法使用TypeScript的接口定义props参数的类型，可以更加明确地指定参数的类型。 4. 方法4： ```javascript const props = withDefaults( defineProps<{ width?: string; height?: string }>(), { width: '100px' // 默认值，可不写 } ); ``` 这种方法结合了defineProps和withDefaults，可以在定义props时指定默认值，减少重复代码。 通过使用defineProps，我们可以在组合函数中定义和接收父组件传递的props参数，方便组件间的通信。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值