Props

Vue components require explicit props declaration. In <script setup>, use defineProps(). In non-<script setup>, use the props option or an object syntax.

<script setup>
const props = defineProps(['foo']);
console.log(props.foo);
</script>

<script>
export default {
  props: ['foo'],
  setup(props) {
    console.log(props.foo);
  }
};
</script>

Prop Passing Details

Prop Name Casing

Use camelCase for long prop names:

defineProps({
  greetingMessage: String
})

When passing to a child component, use kebab-case:

<MyComponent greeting-message="hello" />

Static vs. Dynamic Props

Pass props statically or dynamically:

<BlogPost title="Vue Journey" />
<BlogPost :title="post.title" />

Passing Different Value Types

Pass various types:

<BlogPost :likes="42" />
<BlogPost is-published />
<BlogPost :is-published="false" />
<BlogPost :comment-ids="[234, 266, 273]" />
<BlogPost :author="{ name: 'Veronica', company: 'Veridian Dynamics' }" />

One-Way Data Flow

Props create a one-way-down binding, preventing child components from mutating the parent's state.

Mutating Object / Array Props

Avoid mutating objects/arrays passed as props.

Prop Validation

Validate props with an object:

defineProps({
  propA: Number,
  propB: [String, Number],
  propC: { type: String, required: true }
})