vue3项目一些小坑
2024-10-21 09:32:49
文章来自 https://mp.weixin.qq.com/s/nJsfOUNNKYQdvB9o9BXVVQ
1. Vue2.x 和 Vue3.x 生命周期方法的变化
文档地址:https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html
Vue2.x 和 Vue3.x 生命周期方法的变化蛮大的,先看看:
2.x 生命周期 | 3.x 生命周期 | 执行时间说明 |
---|---|---|
beforeCreate | setup | 组件创建前执行 |
created | setup | 组件创建后执行 |
beforeMount | onBeforeMount | 组件挂载到节点上之前执行 |
mounted | onMounted | 组件挂载完成后执行 |
beforeUpdate | onBeforeUpdate | 组件更新之前执行 |
updated | onUpdated | 组件更新完成之后执行 |
beforeDestroy | onBeforeUnmount | 组件卸载之前执行 |
destroyed | onUnmounted | 组件卸载完成后执行 |
errorCaptured | onErrorCaptured | 当捕获一个来自子孙组件的异常时激活钩子函数 |
2. script-setup 模式中父组件获取子组件的数据
文档地址:https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose
这里主要介绍父组件如何去获取子组件内部定义的变量,关于父子组件通信,可以看文档介绍比较详细:https://v3.cn.vuejs.org/guide/component-basics.html
我们可以使用全局编译器宏的defineExpose
宏,将子组件中需要暴露给父组件获取的参数,通过 {key: vlaue}
方式作为参数即可,父组件通过模版 ref 方式获取子组件实例,就能获取到对应值:
// 子组件
<script setup>
let name = ref("pingan8787")
defineExpose({ name }); // 显式暴露的数据,父组件才可以获取
</script> // 父组件
<Chlid ref="child"></Chlid>
<script setup>
let child = ref(null)
child.value.name //获取子组件中 name 的值为 pingan8787
</script>
注意:
- 全局编译器宏只能在 script-setup 模式下使用;
- script-setup 模式下,使用宏时无需
import
可以直接使用; - script-setup 模式一共提供了 4 个宏,包括:defineProps、defineEmits、defineExpose、withDefaults。
1、 vue3项目本地热更新时报错TypeError: parentComponent.ctx.deactivate is not a function
解决方法: 在keep-alive、component上设置key进行排序(即加个key)
3、vue3中为什么不可以用this?
因为vue3中的setup方法是在befoerCerate生命函数之前进行的,并没有任何data数据,所以也就不存在this,因此也可以使用箭头函数。
4、使用ref动态绑定
<!-- vm.$refs.p 会是 DOM 节点 -->
<p ref="p">hello</p> <!-- vm.$refs.child 会是子组件实例 -->
<child-component ref="child"></child-component> <!-- 当动态绑定时,我们可以将 ref 定义为回调函数,显式地传递元素或组件实例 -->
<child-component :ref="(el) => child = el"></child-component>
关于 ref 注册时机的重要说明:因为 ref 本身是作为渲染函数的结果而创建的,在初始渲染时你不能访问它们——它们还不存在!$refs
也是非响应式的,因此你不应该试图用它在模板中做数据绑定。
最新文章
- ASP.NET OAuth:解决refresh token无法刷新access token的问题
- js日期比较
- a标签 打电话 发邮件
- mysql 命令行参数
- JAVA-- M选N的组合算法
- springMVC配置文件spring-servlet.xml中<;mvc:annotation-driven />;的意义
- BPMN这点事-BPMN扩展元素
- SQL Server Management Studio 使用作业实现数据库备份
- C# txt文件读写
- Tomcat学习笔记 - 错误日志 - NetBeans配置tomcat出错情况总结 -- 尚未授予访问 Tomcat 服务器的权限。请在服务器管理器的 Tomcat 定制器中设置 ";manager-script"; 角色的正确用户名和口令。 有关详细信息, 请查看服务器日志。
- 第七届河南省赛A.物资调度(dfs)
- Linux常见命令集锦
- [HEOI2016]求和 sum
- Python学习宝典,Python400集让你成为从零基础到手写神经网络的Python大神
- 【从零开始搭建自己的.NET Core Api框架】(一)创建项目并集成swagger:1.1 创建
- CentOS7.6配置do.cker和K.B.S
- Java抽象类简单学习
- 更改WebBrowser控件的用户代理
- 蜻蜓特派员 Windows XP SP3 纯净终结版
- java改单个插入为批量插入
热门文章
- 使用阿里云产品搭建PHPWIND
- mov eax,dword ptr[0x00aff834] 和 lea eax,[0x00aff834]区别
- Unity_UIWidgets - 组件Container
- Django框架之drf:7、认证组件,权限组件,频率组件,过滤的多种用法,排序,分页,
- 宇宙最强开发工具VScode简易手册
- Apache Hudi 流转批 场景实践
- 微信小程序数字转中文wxs
- JZOJ 2934. 【NOIP2012模拟8.7】字符串函数
- python Gui编程工具详解:beeware
- Ubuntu18.04修改IP地址的方法