Vue中defineProps和defineEmits的使用小结

<!-- ❌ 错误：在 script setup 中手动 import defineProps -->
<script setup>
import { defineProps } from 'vue'  // ❌ 不需要也不能 import！
defineProps({ msg: String })
</script>

<!-- ✅ 正确：运行时声明，带类型和默认值 -->
<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  },
  items: {
    type: Array,
    default: () => []     // 对象/数组默认值必须用工厂函数
  },
  callback: {
    type: Function,
    default: () => () => {}
  }
})
</script>

<template>
  <h1>{{ title }}</h1>
  <p>共 {{ count }} 项</p>
</template>

<!-- ❌ 错误：对象默认值直接写对象 -->
<script setup>
const props = defineProps({
  config: {
    type: Object,
    default: { theme: 'dark' }  // ❌ 每个实例共享同一引用！
  }
})
</script>

<!-- ✅ 正确：TS 泛型声明，类型推断完整 -->
<script setup lang="ts">
interface Props {
  title: string
  count?: number          // 可选
  items?: string[]
}

const props = defineProps<Props>()

// withDefaults 提供默认值
const props2 = withDefaults(defineProps<Props>(), {
  count: 0,
  items: () => ['默认项']
})
</script>

<!-- ❌ 错误：运行时声明和泛型声明混用 -->
<script setup lang="ts">
// 不能同时用 type 对象和泛型
const props = defineProps<Props & {
  extra: {
    type: String,    // ❌ 泛型里不能写运行时校验
    required: true
  }
}>()
</script>

<!-- ✅ 正确：声明事件 + 校验函数 -->
<script setup>
const emit = defineEmits({
  // 校验函数
  submit: (payload) => {
    if (!payload.email.includes('@')) {
      console.warn('email 格式不对')
      return false
    }
    return true
  },
  cancel: null   // null 表示不校验
})

function handleSubmit() {
  emit('submit', { email: 'boss@example.com', name: '老板' })
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <button type="submit">提交</button>
    <button @click="emit('cancel')">取消</button>
  </form>
</template>

<!-- ❌ 错误：没声明 emit，直接用 $emit（setup 中没有 $emit） -->
<script setup>
function handleClick() {
  $emit('submit', data)  // ❌ ReferenceError: $emit is not defined
}
</script>

<!-- ✅ 正确：TS 泛型声明 emits -->
<script setup lang="ts">
const emit = defineEmits<{
  (e: 'submit', payload: { email: string; name: string }): void
  (e: 'cancel'): void
}>()
</script>

<!-- ✅ 正确：自定义组件实现 v-model -->
<!-- MyInput.vue -->
<script setup>
const props = defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>

<template>
  <input :value="modelValue" @input="onInput" />
</template>

<!-- 父组件使用 -->
<template>
  <MyInput v-model="text" />
  <!-- 等价于 -->
  <MyInput :model-value="text" @update:model-value="text = $event" />
</template>

<!-- ✅ 进阶：多个 v-model -->
<script setup>
const props = defineProps<{
  modelValue: string
  title: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', v: string): void
  (e: 'update:title', v: string): void
}>()
</script>

<!-- 父组件 -->
<template>
  <MyInput v-model="text" v-model:title="titleText" />
</template>

<!-- ✅ 正确：defineExpose 暴露指定方法，不暴露内部实现 -->
<!-- ChildForm.vue -->
<script setup>
import { ref } from 'vue'

const formData = ref({ name: '', age: 0 })

// 内部方法，不暴露
function validate() {
  return formData.value.name.length > 0
}

// 只暴露需要的方法
defineExpose({
  validate,
  getData: () => formData.value,
  reset: () => { formData.value = { name: '', age: 0 } }
})
</script>

<!-- 父组件 -->
<script setup>
import { ref, onMounted } from 'vue'
import ChildForm from './ChildForm.vue'

const formRef = ref()

function handleSubmit() {
  if (formRef.value?.validate()) {
    const data = formRef.value.getData()
    console.log(data)
  }
}
</script>

<template>
  <ChildForm ref="formRef" />
  <button @click="handleSubmit">提交</button>
</template>

<!-- ❌ 错误：没 defineExpose，父组件 ref 拿不到任何东西 -->
<script setup>
function validate() { return true }
// 忘了 defineExpose
// 父组件 formRef.value.validate → undefined
</script>

<script setup lang="ts">
import { computed } from 'vue'

// 1. Props 泛型 + 默认值
interface Props {
  modelValue: string
  title?: string
  items?: string[]
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '默认标题',
  items: () => [],
  disabled: false
})

// 2. Emits 泛型声明
const emit = defineEmits<{
  (e: 'update:modelValue', v: string): void
  (e: 'submit', payload: { value: string }): void
  (e: 'cancel'): void
}>()

// 3. computed 代理 v-model
const innerValue = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v)
})

// 4. defineExpose 暴露方法
defineExpose({
  focus: () => {},
  reset: () => {}
})
</script>