28.setup顶层编写方式

App.vue

<template>
  <div>
    <home :counter="counter" @increment="getCounter"/>
  </div>
</template>

<script setup>
  //组件直接导入就行，不需要注册
  import Home from './Home.vue'
  import {ref} from 'vue'
  //变量和方法不需要使用return 返回
  const counter = ref(100)

  const getCounter = (val) => {
    counter.value = val
  }
</script>

<style lang="scss" scoped>

</style>

Home.vue

<template>
  <div>
    <h1>home计数： {{counter}}</h1>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup>
  import {defineProps, defineEmit} from 'vue'
  //注册属性
  const props = defineProps({
    counter: {
      type: Number,
      default: 0
    }
  })

  //注册事件
  const emit = defineEmit(['increment'])
  const increment = () => {
    emit('increment', 200)
  }

</script>

<style lang="scss" scoped>

</style>

此文档主要内容来源于王红元老师的vue3+ts视频教程