vue3 script setup 语法糖用了才知道有多爽 (二)_script setup 组件自动注册-优快云博客

本文链接：https://blog.youkuaiyun.com/YZRHANYU/article/details/129617959

本文介绍了Vue3中自动注册子组件的两种方式，包括使用`scriptsetup`的语法糖。同时，详细讲解了`defineProps`和`defineEmits`在props父子传值和子组件通过`emit`向父组件传递数据中的应用，强调了这两个API在`scriptsetup`中的重要性和使用注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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

2. 自动注册子组件

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

<!-- 子组件 -->
<template>
  <div> this is child component </div>
</template>
<script>
</script>
<style>
</style>

父组件

<template>
  <div>
    <h2>i am father component</h2>
    <!-- 使用子组件 -->
    <Child></Child>
  </div>
</template>

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

<script>
import {
    defineComponent, ref } from 'vue';
import Child from './child.vue' 
export default defineComponent({
   
  components: {
   
        Child
  },
  setup() {
   
    return {
         
    }
  }
});

<script setup> 语法糖的写法
直接省略了子组件注册的过程,直接导入就可以了

<script setup>
import Child from './child.vue'
</script>

小结

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

命名空间组件

3. defineProps , defienEmits()

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

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

defineProps 父子传值

Vue 3 setup() 语法
父组件

<!-- 父组件 -->
<template>
  <div>