vue3 script setup 语法糖用了才知道有多爽 (二)
创始人
2025-05-29 13:35:43

文章目录

    • 2. 自动注册子组件
      • 小结
      • 命名空间组件
    • 3. defineProps , defienEmits()
      • defineProps 父子传值
      • emit子父传值的使用
      • 小结

这里是完整的目录图片,由于整篇文章篇幅太长,拆分成了几篇来展示
在这里插入图片描述

2. 自动注册子组件

在这里插入图片描述
子组件代码

父组件

Vue 3 setup() 语法
Vue3 语法要求在引入子组件的时候需要先在 script 当中 import 导入,并在 components 对象当中绑定注册对应的组件,才能在模板当中使用,

小结

在 script setup 当中,引入的组件可以直接使用,无需通过 components 进行注册,而且在 script setup 范围内的值也能直接作为自定义组件的标签名使用,不需要卸载 component 对象当中

命名空间组件

3. defineProps , defienEmits()

script setup 分别提供了 defineProps 以及 defineEmits 来代替 props 接收父组件传递的数据 (父组件 ⇒ 子组件 传参)

  • defineProps 来代替 props 接收父组件传递的数据 (父组件 ⇒ 子组件 传参)
  • defineEmits 来代替 emit 完成子组件向父组件传递数据 (子组件向外暴露数据)

defineProps 父子传值

Vue 3 setup() 语法
父组件

子组件

可以看到我们在子组件当中对于父组件传过来的数据是从 setup() 方法的 props 参数中获取的,那么在 setup script 语法当中没有 setup() 方法,自然也就无法像之前一样通过 props 参数
来获取到 父 ==> 子的数据

子组件
  • 在子组件当中