您的位置:首页 > 娱乐 > 明星 > vue3学习day03-vue3的生命周期、父子通信、模版引用、defineExpose

vue3学习day03-vue3的生命周期、父子通信、模版引用、defineExpose

2024/10/8 12:53:52 来源:https://blog.csdn.net/2301_76648183/article/details/140966214  浏览:    关键词:vue3学习day03-vue3的生命周期、父子通信、模版引用、defineExpose

11、vue3的生命周期

(1)Vue2中生命周期:

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

(2)选项式API的生命周期:

BeforeCreate/created、beforeMount、mounted、beforeUpdate、updated、

beforeUnmount、unmounted

(3)组合式API的生命周期:

setup、onBeforeMount、onmounted、onBeforeUpdate、onUpdated、

onBeforeUnmount、onUnmounted

(4)注:

1)其中beforeDestroy、destroyed在选项式API中变为beforeUnmount、unmounted
2)生命周期的变化影响代码的书写位置,比如在Vue2中beforeCreate、created写的代码需要写在vue3中的setup

12、父子通信

(1)父传子

1)建立父子关系(进行局部注册)
①导入

②使用

2)父组件传值

3)子组件接收props(在接收过程中,需要借助编译器宏defineProps原理)

4)注
①defineProps原理:编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换

(2)子传父

1)子组件绑定方法

2)触发需要emit属性,vue3没有,通过编译器宏defineEmits实现定义

3)子组件定义方法,在方法内进行触发事件

4)父组件监听子组件触发的事件

5)父组件定义方法,解决需要修改的数据

6)效果

点击按钮:

13、模版引用

(1)概念:通过ref标识,获取真实的dom对象,或组件实例对象

(2)语法:

已知:

1)调用ref生成空对象
①导入ref

②生成ref对象

2)通过ref标识,把ref对象绑定到标签

3)通过设置对应方法调用

4)效果

14、defineExpose

(1)作用:指定哪些属性和方法允许访问(默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的)

(2)语法:

已知:

父组件:

子组件:

使用defineExpose({}):

效果:

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com