vue3学习笔记(2)

1.defineProps 属性

props可以实现父子组件通信,在vue3中我们可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用!

javascript 复制代码
const props = defineProps<{
  agreePolicy: boolean
}>()

2. 声明触发的事件 defineEmits()

如果你正在搭配 TypeScript 使用 <script setup>,也可以使用纯类型标注来声明触发的事件:

javascript 复制代码
const $emit = defineEmits<{
  loginSuccess: [response: LoginSuccessResType]
}>()

3.子组件使用defineExpose把那个变量暴露出去

defineExpose是vue3新增的一个api,放在<scipt setup>下使用的,目的是把属性和方法暴露出去,可以用于父子组件通信,子组件把属性暴露出去, 父组件用ref获取子组件DOM,子组件暴露的方法或属性可以用dom获取。

父组件用ref获取子组件dom拿到暴露的属性

javascript 复制代码
defineExpose({
  formData,
  passRuleFlag,
  codeLogin,
  clearTimer
})
相关推荐
Mephisto.java9 分钟前
【大数据学习 | Spark-Core】Spark提交及运行流程
大数据·学习·spark
Myli_ing24 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风26 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave33 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟35 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
yuwinter38 分钟前
鸿蒙HarmonyOS学习笔记(2)
笔记·学习·harmonyos
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
red_redemption1 小时前
自由学习记录(23)
学习·unity·lua·ab包
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j