Define props in child components, which can be declared and verified using array or object syntax; 2. Pass data to child components through v-bind or its abbreviation in parent components; 3. Support passing various data types such as strings, numbers, boolean values, arrays and objects; 4. Abide by the props read-only principle, do not directly modify props in child components, but handle them through local data or computed attributes; 5. Use kebab-case to pass props in templates, even if camelCase is used when defining; 6. Always verify the types and necessity of props of reusable components to improve robustness. Using props correctly can ensure predictability and maintainability of communication between components.

In Vue.js, props are the primary way to pass data from a parent component to a child component. They allow you to create reusable and modular components by making them dynamic and data-driven. Here's how to use props effectively.

1. Define Props in the Child Component

First, declare the props you expect to receive in the child component. You can do this using the props option in the component definition.

 <!-- ChildComponent.vue -->
<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: [&#39;name&#39;, &#39;age&#39;]
}
</script>

Alternatively, use object syntax for better type checking and validation:

 export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18,
      validator: (value) => value >= 0
    }
  }
}

This ensures name is a required string, and age is an optional number with a default value.

2. Pass Data from the Parent Component

In the parent component, use v-bind (or the shorthand : ) to pass data to the child's props.

 <!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :name="userName" :age="userAge" />
  </div>
</template>

<script>
import ChildComponent from &#39;./ChildComponent.vue&#39;

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      userName: &#39;Alice&#39;,
      userAge: 25
    }
  }
}
</script>

You can also pass static values:

 <ChildComponent name="Bob" :age="30" />

Note: Static values are passed as strings unless bound with : .

3. Handling Different Data Types

Vue supports passing various data types via props:

• Strings : <ChildComponent name="John" />
• Numbers : <ChildComponent :age="25" />
• Booleans : <ChildComponent :isActive="true" />
• Arrays : <ChildComponent :hobbies="[&#39;reading&#39;, &#39;coding&#39;]" />
• Objects : <ChildComponent :user="{ name: &#39;John&#39;, age: 30 }" />

For complex data, it's best to pass them from the parent's data or computed properties.

4. Important Rules and Best Practices

• Props are read-only in the child component. Never mutate a prop directly. If you need to modify it, use a local data property or a computed property.

  ? Don't do this:

   this.name = 'New Name' // Warning: Avoid mutating prop

  ? Instead, use:

   data() {
    return {
      localName: this.name
    }
  }

• Use kebab-case when passing props in templates (even if defined in camelCase):

   <ChildComponent user-name="Alice" />

  This is because HTML attributes are case-insensitive.

• Always validate props when building reusable components to catch errors early.

Using props properly make your components predictable and easier to debug. They form the foundation of parent-child communication in Vue. Basically, define them in the child, pass them from the parent, and never change them directly in the child.

The above is the detailed content of How to use props to pass data to child components in Vue. For more information, please follow other related articles on the PHP Chinese website!