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
})
相关推荐
J总裁的小芒果1 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星2 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js
四夕白告木贞6 分钟前
stm32week13
stm32·单片机·嵌入式硬件·学习
九亿AI算法优化工作室&8 分钟前
结合大语言模型的机械臂抓取操作学习
人工智能·学习·语言模型·自然语言处理
brzhang9 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears10 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code
David凉宸21 分钟前
凉宸推荐给大家的一些开源项目
前端
袋鱼不重23 分钟前
Cursor 最简易上手体验:谷歌浏览器插件开发3s搞定!
前端·后端·cursor
hyyyyy!24 分钟前
《从分遗产说起:JS 原型与继承详解》
前端·javascript·原型模式
竹苓24 分钟前
从一个想法到上线,一万字记录我开发浏览器插件的全过程
前端