Vue 3中defineProps与defineEmits用法深度解析

// 定义一个按钮组件
// 使用类型字面量定义 props
const props = defineProps<{
  size: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
}>()

// 在模板中直接使用
// 现在有了完整的类型提示和检查

// 使用 withDefaults 辅助函数设置默认值
interface ButtonProps {
  size: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
}

const props = withDefaults(defineProps<ButtonProps>(), {
  size: 'medium',
  disabled: false,
  loading: false
})

// 运行时声明与类型声明结合
const props = defineProps({
  // 运行时声明
  label: {
    type: String,
    required: true
  },
  // 类型声明
  count: {
    type: Number,
    default: 0
  }
})

// 定义类型
interface Props {
  label: string
  count?: number
}

// 这种写法在某些复杂场景下很有用

// 定义表单组件的事件
// 使用类型字面量定义 emits
const emit = defineEmits<{
  // submit 事件携带一个表单数据对象
  submit: [formData: FormData]
  // cancel 事件不携带数据
  cancel: []
  // input 事件携带字符串值
  input: [value: string]
}>()

// 在方法中触发事件
function handleSubmit() {
  const formData = gatherFormData()
  // TypeScript 会检查 formData 是否符合 FormData 类型
  emit('submit', formData)
}

function handleCancel() {
  // 不传递参数，符合类型定义
  emit('cancel')
}

// 使用接口定义事件类型
interface FormEvents {
  submit: (data: FormData) => void
  cancel: () => void
  validate: (isValid: boolean, errors: string[]) => void
}

const emit = defineEmits<FormEvents>()

// 在验证方法中触发复杂事件
function performValidation() {
  const isValid = validateForm()
  const errors = getValidationErrors()
  
  // TypeScript 确保我们传递正确的参数类型
  emit('validate', isValid, errors)
}

// 定义表格组件的 props 和 emits
interface TableProps {
  data: any[]
  columns: Column[]
  searchable?: boolean
  pagination?: boolean
}

const props = defineProps<TableProps>()

// 事件定义基于 props 的某些特性
const emit = defineEmits<{
  // 只有当 searchable 为 true 时才会有 search 事件
  search: [query: string]
  // 只有当 pagination 为 true 时才会有 pageChange 事件
  pageChange: [page: number]
  // 始终存在的选择事件
  rowSelect: [row: any]
}>()

// 在搜索方法中条件性触发事件
function handleSearch(query: string) {
  if (props.searchable) {
    // TypeScript 知道这个事件是有效的
    emit('search', query)
  }
}

// 定义一个通用的列表组件
interface ListProps<T> {
  items: T[]
  keyField: keyof T
  renderItem?: (item: T) => any
}

// 使用泛型定义 props
function defineListProps<T>() {
  return defineProps<ListProps<T>>()
}

// 在具体组件中使用
interface User {
  id: number
  name: string
  email: string
}

// 为 User 类型特化组件
const props = defineListProps<User>()

// 异步操作组件的完整类型定义
interface AsyncProps {
  data?: any
  loading?: boolean
  error?: string | null
}

interface AsyncEmits {
  retry: []
  reload: [force?: boolean]
  success: [data: any]
}

const props = defineProps<AsyncProps>()
const emit = defineEmits<AsyncEmits>()

// 在异步操作完成时触发事件
async function fetchData() {
  try {
    const result = await api.fetch()
    emit('success', result)
  } catch (error) {
    // 错误处理
  }
}

// 错误的做法：试图在运行时使用类型
const props = defineProps<{
  count: number
}>()

// 这在运行时是 undefined，因为类型信息在编译时就被移除了
console.log(props.count.type) // undefined

// 正确的做法：使用运行时声明
const props = defineProps({
  count: {
    type: Number,
    required: true
  }
})

// 定义带有可选参数的事件
const emit = defineEmits<{
  // 第二个参数是可选的
  search: [query: string, options?: SearchOptions]
}>()

// 使用时要注意参数顺序
function handleSearch(query: string) {
  // 可以只传递必填参数
  emit('search', query)
}

function handleAdvancedSearch(query: string, options: SearchOptions) {
  // 也可以传递所有参数
  emit('search', query, options)
}

// 使用类型别名简化复杂类型
type UserProfile = {
  personal: {
    name: string
    age: number
  }
  preferences: {
    theme: 'light' | 'dark'
    language: string
  }
}

const props = defineProps<{
  profile: UserProfile
}>()

// 这样既保持了类型安全，又让代码更清晰

// 父组件提供数据
const props = defineProps<{
  theme: 'light' | 'dark'
  locale: string
}>()

// 基于 props 提供全局配置
provide('appConfig', {
  theme: props.theme,
  locale: props.locale
})

// 子组件注入并使用
const config = inject('appConfig')

const props = defineProps<{
  items: any[]
  filter: string
}>()

const emit = defineEmits<{
  filtered: [results: any[]]
}>()

// 监听 props 变化并触发事件
watch(() => props.filter, (newFilter) => {
  const filtered = filterItems(props.items, newFilter)
  emit('filtered', filtered)
})

// 基于 props 计算衍生数据
const sortedItems = computed(() => {
  return props.items.sort(sortFunction)
})

const props = defineProps<{
  // 对于大型配置对象，使用 shallowRef 避免不必要的响应式开销
  config: AppConfig
  // 对于频繁变化的数据，保持深度响应式
  items: any[]
}>()

import type { PropType } from 'vue'

const props = defineProps({
  // 使用 PropType 进行运行时类型验证
  complexData: {
    type: Object as PropType<ComplexData>,
    required: true,
    validator: (value: ComplexData) => {
      return validateComplexData(value)
    }
  }
})