vue3的 script setup 基本使用

1.defineProps 用来接收父组件传来的 props

2.defineEmits 子组件向父组件事件传递

3.defineExpose 组件暴露出自己的属性，在父组件中可以拿到值或函数，父组件用ref接收即可

// 如果用到ts 来接收 props 里面有两种写法，这是第一种，它可以自行推断接收的值是什么类型（对象除外）
const props = defineProps({
  page: { // 页码
    type: Number,
    default: 1
  },
  limit: { // 每页大小
    type: number,
    default: 10
  },
  loadList: { // 列表加载函数
    type: Function,
    default: () => {}
  },
  obj: { // 假如传过来一个对象
    type: Object as PropType<{ a: string, b: number }>,
    required: true // 必填项
  }
})
// 第二种写法，纯ts写法
interface PropsType {
  page: number,
  limit: number,
  loadList: () => void  
}
// 如果不需要写默认值的话，可以直接
const props = defineProps()
// 如果需要写默认值，只能调用提供的编译函数
const props = withDefaults(defineProps(), {
  page: 1,
  limit: 10,
  loadList: () => {}
})
// 但是自我感觉，还是第一种方法更为简介明了，具体选择哪种就是看个人喜好了

TS结合vue3的一些初级使用方法 - 知乎