vue3 setup 语法糖

Vue3官方提供了 script setup 语法糖

只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。

<template>
  <my-component :num="num" @click="addNum" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import MyComponent from './MyComponent .vue';

  // 像在平常的setup中一样的写,但是不需要返回任何变量
  const num= ref(0)       //在此处定义的 num 可以直接使用
  const addNum= () => {   //函数也可以直接引用,不用在return中返回
    num.value++
  }
</script>

//必须使用驼峰命名

因为没有了setup函数，那么props，emit，attrs怎么获取呢

setup script语法糖提供了新的API来供我们使用

---

defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。

//父组件

<template>
  <my-son foo="????????????" @change="childClick" />
</tem