Vue.js: Component Communication

<script setup>
defineProps({
  // 1. Primitive types
  name: String,
  age: Number,
  active: Boolean,
  
  // 2. Complex types
  user: Object,
  items: Array,
  
  // 3. Multiple types (any of them)
  id: [String, Number],
  
  // 4. Required
  title: { type: String, required: true },
  
  // 5. Default value
  pageSize: { type: Number, default: 20 },
  
  // 6. Custom validation
  email: {
    type: String,
    validator: (val) => val.includes('@')
  },
  
  // 7. Function default (the default must be a function) |
  createdAt: {
    type: Date,
    default: () => new Date()
  }
})
</script>

<script setup>
defineProps({
  // String
  title: String,
  
  // Number + default + validation
  pageSize: {
    type: Number,
    default: 20,
    validator: (val) => val > 0 && val <= 100
  },
  
  // Boolean (note: for falsy defaults use the function form)
  isVip: {
    type: Boolean,
    default: false
  },
  
  // Array default (must return it from a function)
  tags: {
    type: Array,
    default: () => ['vue', 'javascript']
  },
  
  // Object default (must return it from a function)
  user: {
    type: Object,
    default: () => ({ name: 'Guest', age: 0 })
  },
  
  // Required + custom validation
  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<{
  // Required (default)
  user: User
  pageSize: number
  
  // Optional (add ?)
  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. Simple declaration
const emit = defineEmits(['click', 'submit', 'cancel'])

// 2. With payload validation
const emit = defineEmits({
  addToCart: (productId) => typeof productId === 'number',
  remove: (id) => typeof id === 'string'
})

// 3. TypeScript types
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 with no payload
emit('click')

// 2. Emit with one argument
emit('add-to-cart', 123)

// 3. Emit with several arguments
emit('submit', { name: 'Alice' }, 2026)

// 4. Conditional emit
if (isValid) emit('submit')

// 5. Emit from a function
function handleAdd() {
  emit('add-to-cart', props.product.id)
}
</script>

<script setup>
const emit = defineEmits({
  // ✅ Validation: id must be a number
  remove: (id) => typeof id === 'number' || 'Validation failed',
  
  // ❌ Throws: when the payload does not match
  // remove: 'invalid',  // Wrong: must be a function
})
</script>

One text input with the placeholder Search... and the line Live: (empty) below it.
Every keystroke fires update:modelValue, the parent's searchQuery updates, and the text is echoed immediately — typing vue turns the line into Live: vue;
clearing the field brings back (empty).

[Search...              ]
Live: (empty)

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

// ❌ Wrong: mutating a prop directly
props.user.name = 'Bob'  // Vue warning!

// ✅ Exception 1: when the prop is a reference type, you may replace it with a new object
// The parent passes a reference; the child cannot change the reference, but it can emit and let the parent change it

// ✅ Exception 2: the initial prop value can be copied into local state
const localUser = ref({ ...props.user })
// Then mutate localUser (the parent is unaffected)

// ✅ Exception 3: derive a value with computed
const userName = computed(() => props.user.name)

// ✅ Exception 4: use v-model (syntactic sugar)
// <Child v-model="value" /> is equivalent to :value + @update:value

// ✅ Exception 5: provide/inject across levels
// The parent provides, the child injects (learned in Phase 2.5)
</script>

// ❌ Anti-pattern 1: mutating a prop directly
props.user.name = 'Bob'

// ❌ Anti-pattern 2: mutating a prop inside a watcher in the child
watch(() => props.value, (val) => { props.value = val * 2 })

// ❌ Anti-pattern 3: passing a two-way bound ref through (not recommended)
const localRef = ref(props.value)
watch(localRef, (val) => emit('update', val))

// ❌ Anti-pattern 4: ignoring the naming contract when using v-model
// v-model expects an update:xxx event, so custom event names must match
emit('change', val)  // ❌ the parent's @change will not fire
emit('update:value', val)  // ✅ matches v-model

// ❌ Anti-pattern 5: managing the parent's data from inside the child
emit('update', { ...props.user, name: 'Bob' })  // Wrong: pass only the ID and let the parent update it

A label reading Name:, an input with the placeholder Enter name...
and a green border (the input-field class reached the <input> rather than the wrapper div), and the line Input value: which fills in as you type.

Name:
[Enter name...        ]   (green border)
Input value:

Two cards.
The iPhone card shows $999, an enabled Add to Cart button, ❤️ Favorite and 👁 Quick View;
the MacBook card is dimmed, its button is disabled and reads Out of Stock, and no stock badge appears because stock is 0.
The footer starts at Cart items: 0 | Favorites: 0;
each Add to Cart increments the cart, each Favorite pushes the product id, and every emit passes its validator before the parent handler runs.

iPhone
$999
[Add to Cart] [❤️ Favorite] [👁 Quick View]

MacBook
$2499
[Out of Stock] [❤️ Favorite] [👁 Quick View]   (card dimmed)

Cart items: 0 | Favorites: 0