vue3 script setup 语法糖用了才知道有多爽 (六)

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

10. 针对 TypeScript 的功能

1.针对类型的 props/emit 声明

在 Vue3 setup script 语法糖当中,声明 props 和 emit 选项时是通过 defineProps 以及 defineEmits 来声明的

• 运行时声明 : defineProps 和 defineEmits 在 Vue3 语法糖中的方式是 运行时声明
• 类型声明 : 针对 TypeScript , Vue3 setup 语法糖还支持 类型声明 defineProps 和 defineEmits 选项.

但是需要注意运行时声明和类型声明这两种声明方式只能二选一,不能同时使用,否则编译报错

运行时声明 defineProps 和 defineEmits 选项的写法

父组件代码

<!-- father.vue -->
<template>
  <div>
    <h2>我是父组件！</h2>
    <Child foo="使用子组件通过 props 传值 ! " @change="fnInFather" @hello = "fnInFather2"></Child>
  </div>
</template>

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


const fnInFather = (msg)=>{
   
  console.log("父组件的 fnInFather 函数触发了,拿到了后面的消息====>",msg)
}
const fnInFather2 = (msg)=>{
   
  console.log("父组件的  fnInFather2 函数触发了,拿到了后面的消息&