Vue.js: 组件通信：props/emits

<script setup>
defineProps({
  // 1. 基础类型
  name: String,
  age: Number,
  active: Boolean,
  
  // 2. 复杂类型
  user: Object,
  items: Array,
  
  // 3. 多类型（任一）
  id: [String, Number],
  
  // 4. 必填
  title: { type: String, required: true },
  
  // 5. 默认值
  pageSize: { type: Number, default: 20 },
  
  // 6. 自定义验证
  email: {
    type: String,
    validator: (val) => val.includes('@')
  },
  
  // 7. 函数默认值（默认值需要是函数）|
  createdAt: {
    type: Date,
    default: () => new Date()
  }
})
</script>

<script setup>
defineProps({
  // 字符串
  title: String,
  
  // 数字 + 默认值 + 验证
  pageSize: {
    type: Number,
    default: 20,
    validator: (val) => val > 0 && val <= 100
  },
  
  // 布尔（注意：默认值的 falsy 值要用函数形式）
  isVip: {
    type: Boolean,
    default: false
  },
  
  // 数组默认值（必须用函数返回）
  tags: {
    type: Array,
    default: () => ['vue', 'javascript']
  },
  
  // 对象默认值（必须用函数返回）
  user: {
    type: Object,
    default: () => ({ name: 'Guest', age: 0 })
  },
  
  // 必填 + 自定义验证
  email: {
    type: String,
    required: true,
    validator: (val) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)
  }
})
</script>

<script setup lang="ts">
interface User {
  id: number
  name: string
  email: string
  role: 'admin' | 'user'
}

defineProps<{
  user: User
  size?: 'small' | 'medium' | 'large'
  showEmail?: boolean
}>()
</script>

defineProps<{
  // 必填（默认）
  user: User
  pageSize: number
  
  // 可选（加 ?）
  variant?: 'primary' | 'secondary'
  showIcon?: boolean
}>()

<script setup lang="ts">
interface Props {
  user: User
  size?: 'small' | 'medium' | 'large'
  showEmail?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  showEmail: true
})
</script>

<script setup>
// 1. 简单声明
const emit = defineEmits(['click', 'submit', 'cancel'])

// 2. 带参数验证
const emit = defineEmits({
  addToCart: (productId) => typeof productId === 'number',
  remove: (id) => typeof id === 'string'
})

// 3. TypeScript 类型
const emit = defineEmits<{
  'add-to-cart': [productId: number]
  'remove-item': [id: string, reason: string]
  'update': [id: number, data: object]
}>()
</script>

<script setup>
const emit = defineEmits(['click', 'submit', 'add-to-cart'])

// 1. 简单触发
emit('click')

// 2. 传参
emit('add-to-cart', 123)

// 3. 传多个参数
emit('submit', { name: 'Alice' }, 2026)

// 4. 条件触发
if (isValid) emit('submit')

// 5. 函数式触发
function handleAdd() {
  emit('add-to-cart', props.product.id)
}
</script>

<script setup>
const emit = defineEmits({
  // ✅ 验证：id 必须是 number
  remove: (id) => typeof id === 'number' || 'Validation failed',
  
  // ❌ 抛错：参数不匹配时
  // remove: 'invalid',  // 错：必须是函数
})
</script>

初始输入框显示占位符「搜索...」，下方文字「实时显示: (空)」。
输入 vue 时下方逐字同步，最终显示「实时显示: vue」；清空输入框又回到「(空)」。

<script setup>
const props = defineProps({ user: Object })

// ❌ 错：直接修改 prop
props.user.name = 'Bob'  // Vue 警告！

// ✅ 例外 1：prop 是引用类型时，可以用新对象替换
// 父组件传的是引用，子组件不能改引用，但可以 emit 让父改

// ✅ 例外 2：prop 初始值可以保存到本地
const localUser = ref({ ...props.user })
// 然后修改 localUser（不影响父）

// ✅ 例外 3：用 computed 派生
const userName = computed(() => props.user.name)

// ✅ 例外 4：用 v-model（语法糖）
// <Child v-model="value" /> 等同于 :value + @update:value

// ✅ 例外 5：provide/inject 跨层级
// 父 provide，子 inject（Phase 2.5 学）
</script>

// ❌ 反模式 1：直接修改 prop
props.user.name = 'Bob'

// ❌ 反模式 2：在子组件用 watch 修改 prop
watch(() => props.value, (val) => { props.value = val * 2 })

// ❌ 反模式 3：双向绑定的 ref 透传（不推荐）
const localRef = ref(props.value)
watch(localRef, (val) => emit('update', val))

// ❌ 反模式 4：使用 v-model 时不遵循命名
// v-model 期望 update:xxx 事件，自定义事件名要配套
emit('change', val)  // ❌ 父组件 @change 不会触发
emit('update:value', val)  // ✅ v-model 配套

// ❌ 反模式 5：在子组件中直接管理父组件的数据
emit('update', { ...props.user, name: 'Bob' })  // 错：应该只传 ID，父组件自己更新

显示标签「Name:」和一个输入框（占位符「Enter name...」，边框为绿色 .input-field），下方「输入值: 」为空。
输入 Alice 后，下方实时变为「输入值: Alice」——class 与 placeholder 都已通过 $attrs 绑到 input 上。

两张商品卡：iPhone 显示 $999 和可点击的「Add to Cart」；MacBook 显示 $2499、卡片半透明、按钮置灰并显示「Out of Stock」。
底部一行「购物车商品数: 0 | 收藏: 0」。
点击 iPhone 的 Add to Cart → 「购物车商品数: 1」；再点 ❤️ Favorite → 「收藏: 1」。