Props and Component Communication

<!-- ProductCard.vue (Child) -->
<script setup>
// defineProps declares what the parent can pass in
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  price: {
    type: Number,
    required: true
  },
  category: {
    type: String,
    default: &#039;General'
  },
  inStock: {
    type: Boolean,
    default: true
  },
  tags: {
    type: Array,
    default: () => []  // Array/Object defaults must be factory functions
  }
})

// Access props in script
console.log(props.name)
console.log(props.price)
</script>

<template>
  <!-- Access props directly in template (no props. prefix needed) -->
  <div class="product-card" :class="{ &#039;out-of-stock': !inStock }">
    <h3>{{ name }}</h3>
    <span class="category">{{ category }}</span>
    <p class="price">${{ price.toFixed(2) }}</p>
    <div class="tags">
      <span v-for="tag in tags" :key="tag" class="tag">{{ tag }}</span>
    </div>
    <span v-if="!inStock" class="oos-badge">Out of Stock</span>
  </div>
</template>

<!-- App.vue (Parent) -->
<script setup>
import ProductCard from &#039;./components/ProductCard.vue'
</script>

<template>
  <!-- Passing static values -->
  <ProductCard name="MacBook Pro" :price="1999.99" />

  <!-- Passing dynamic values (v-bind shorthand) -->
  <ProductCard
    :name="product.name"
    :price="product.price"
    :category="product.category"
    :in-stock="product.stock > 0"
    :tags="product.tags"
  />

  <!-- Spread all properties of an object as props -->
  <ProductCard v-bind="product" />
</template>

<!-- QuantitySelector.vue (Child) -->
<script setup>
import { ref } from &#039;vue'

// defineEmits declares what events this component can emit
const emit = defineEmits([&#039;increment', 'decrement', 'change', 'reset'])

// With validation (Vue 3.3+)
// const emit = defineEmits({
//   change: (val) => typeof val === 'number',
// })

const quantity = ref(1)

function increment() {
  quantity.value++
  emit(&#039;increment', quantity.value)    // Emit event with payload
  emit(&#039;change', quantity.value)       // Also emit generic change
}

function decrement() {
  if (quantity.value <= 1) return
  quantity.value--
  emit(&#039;decrement', quantity.value)
  emit(&#039;change', quantity.value)
}
</script>

<template>
  <div class="qty-selector">
    <button @click="decrement">−</button>
    <span>{{ quantity }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<!-- CartItem.vue (Parent) -->
<script setup>
import QuantitySelector from &#039;./QuantitySelector.vue'
import { ref } from &#039;vue'

const quantity = ref(1)
const price = ref(29.99)

function handleQuantityChange(newQty) {
  quantity.value = newQty
  console.log(&#039;Total:', newQty * price.value)
}
</script>

<template>
  <div class="cart-item">
    <span>Vue Course — ${{ price }}</span>

    <!-- Listen for emitted events with @ -->
    <QuantitySelector
      @increment="(q) => console.log(&#039;Up:', q)"
      @decrement="(q) => console.log(&#039;Down:', q)"
      @change="handleQuantityChange"
    />

    <span>Total: ${{ (quantity * price).toFixed(2) }}</span>
  </div>
</template>

<!-- BaseInput.vue — Custom component supporting v-model -->
<script setup>
// For v-model support:
defineProps({ modelValue: String })
const emit = defineEmits([&#039;update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="emit(&#039;update:modelValue', $event.target.value)"
    class="base-input"
  />
</template>

<!-- Parent using v-model on custom component -->
<script setup>
import { ref } from &#039;vue'
import BaseInput from &#039;./BaseInput.vue'
const email = ref(&#039;')
</script>
<template>
  <!-- v-model expands to: :modelValue="email" @update:modelValue="email = $event" -->
  <BaseInput v-model="email" />
  <p>Email: {{ email }}</p>
</template>

defineProps({
  // Type only
  title: String,
  count: Number,

  // Multiple types
  value: [String, Number],

  // Required
  id: { type: Number, required: true },

  // With default
  status: { type: String, default: 'active' },

  // Array default (must be factory function)
  items: { type: Array, default: () => [] },

  // Custom validator
  size: {
    type: String,
    default: 'md',
    validator: (value) => ['sm', 'md', 'lg', 'xl'].includes(value)
  }
})