江西营销型网站建设,wordpress数据库用户导出,管理系统网站模板下载,网站建设验收使用情况目录前言一#xff0c;什么是hook二#xff0c; hook函数的使用2.1 铺垫2.2 hook函数的写法2.3 使用写好的hook函数后记前言
在学习Es6的时候#xff0c;我们开始使用类与对象#xff0c;开始模块化管理#xff1b;在Vue中我们可以使用mixin进行模块化管理#xff1b;Vu…
目录前言一什么是hook二 hook函数的使用2.1 铺垫2.2 hook函数的写法2.3 使用写好的hook函数后记前言
在学习Es6的时候我们开始使用类与对象开始模块化管理在Vue中我们可以使用mixin进行模块化管理Vue3中同样存在模块化管理需要使用到hook函数。
本节博客就针对Vue3中的hook函数进行讲解在讲解中会穿插hook使用中遇到的坑和需要注意的东西。标黄部分
一什么是hook
hook的本质是一个函数把setup函数中使用的composition Api进行了封装类似于Vue2中的mixin。
二 hook函数的使用
2.1 铺垫
我们先来写一段很简单的代码
templatediv我是App组件/divdivsum的值为{{ sum }}/divbutton clickadd点击sum的值加1/button
/templatescript
import {ref} from vue
export default {name: App,setup() {let sum ref(0)function add() {sum.value }return {sum, add}}
}
/scriptstyle/style上面的代码简单的用ref定义了一个sum并且设置了一个按钮如若点击则sum值可加一。 如果现在有五个组件都要实现类似的功能想请问大家是不是要把这段代码复制粘贴五次呢
其实不用了解模块化管理的读者可以猜到Vue3中也可以实现代码只写一次需要时复用的功能——hook函数。
且看hook函数的讲解。
2.2 hook函数的写法
很简单首先我们创建一个名为hooks的文件夹内部创建一个js文件js文件名可以根据功能来取 把我们刚刚写的关于sum的部分粘贴到这个js文件中
接着我们把这些内容放到一个函数中并暴露出去注意ref是需要引用才能使用的在js文件中依旧需要引入。
别忘了把需要用到的东西return出去
以上文件就已经写好了。
2.3 使用写好的hook函数
接下来我们要在App.vue中使用刚刚写好的addSum模块。
一共有三个步骤引用、接收、暴露。
首先引用在App.vue组件中import 其次接收这里特别容易出错 这里我需要强调几点首先let后面定义的东西不能与addSum同名这是个大坑会报错。其次就是最好像我下面这样解构一下。不然你用的时候只能像别的案例一样只获取一个值。 最后别忘记把我们接收到的sumadd返回出去。
后记
本篇博客中遇见的问题笔者花了很久才解决。如果还有什么问题可以在评论区里面发表。
欢迎关注期待跟您带来更好的文章。
