vue3学习笔记（2）

吴小花的博客2023-09-22 23:08

1.defineProps 属性

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

javascript 复制代码

const props = defineProps<{
  agreePolicy: boolean
}>()

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

javascript 复制代码

const $emit = defineEmits<{
  loginSuccess: [response: LoginSuccessResType]
}>()

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

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

javascript 复制代码

defineExpose({
  formData,
  passRuleFlag,
  codeLogin,
  clearTimer
})