Vue — Props

Defining props

<script>
export default {
  props: {
    title: String,
    count: Number,
    isActive: Boolean,
    items: Array,
    user: Object
  }
}
</script>

Using props

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
  </div>
</template>

Parent usage

<ChildComponent title="Hello" :count="5" :is-active="true" />

Prop validation

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    },
    size: {
      type: String,
      default: 'medium',
      validator: (val) => ['small', 'medium', 'large'].includes(val)
    },
    items: {
      type: Array,
      default: () => []
    }
  }
}
</script>

One-way data flow

<!-- Child should NOT mutate props directly -->
<script>
export default {
  props: ['count'],
  data() {
    return {
      localCount: this.count // Copy to local data
    }
  }
}
</script>

Prop casing

<!-- kebab-case in templates -->
<blog-post post-title="Hello"></blog-post>

<!-- camelCase in JS -->
props: {
  postTitle: String
}

Emitting events

<template>
  <button @click="$emit('update', value + 1)">Add</button>
</template>

<script>
export default {
  emits: ['update']
}
</script>

v-model on components

<!-- Parent -->
<CustomInput v-model="text" />

<!-- Child -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

Mini Practice

1. Create a component with typed props
2. Add prop validation
3. Use props for data flow
4. Emit events to parent

Up Next

Continue with Events - Child to parent communication.