Vue3 props Attributes

Vue3 选项式 APIVue3 Options API

propsis a way to pass data between components.

In Vue.js, a parent component canpropspass data to child components. After the child component receives this data, it can render or perform other operations based on the data.

Analogy

You canpropsimagine it as a postman. The parent component is the sender, the child component is the receiver. The parent component passes the data (a letter) throughprops(the postman) to the child component. After receiving the data, the child component can process it according to the content.

How to use props?

In Vue.js, usingpropsis very simple. Below we use an example to illustrate how to useprops。

Example: Passing and Receiving props

Suppose we have a parent componentParentComponentand a child componentChildComponent. We want the parent component to pass a message to the child component.

1. Parent component (ParentComponent.vue)

Example

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

2. Child component (ChildComponent.vue)

Example

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

Explanation

  1. Parent component: In the parent component, we:message="parentMessage"willparentMessagepass data to the child component.parentMessageis a variable defined in the parent component, and its value is'Hello from Parent!'。

  2. Child component: In the child component, we usepropsto receive the data passed from the parent component.messageis defined in the child componentprops, and its type isString, and it is set torequired: true, indicating that thispropsis required.

  3. Rendering: After the child component receivesmessage, it renders it in the template, displaying as<p>Hello from Parent!</p>。

Types and Validation of props

In Vue.js, you canpropsspecify types and validation rules to ensure that the passed data meets expectations.

Example: Types and Validation

Example

props: {
  message: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 18
  },
  hobbies: {
    type: Array,
    validator: function (value) {
      return value.length > 0;
    }
  }
}

Explanation

  1. **type**: specifypropsthe data type. It can beString、Number、Boolean、Array、Objectetc.

  2. **required**: specifypropswhether it is required. If set totrue, the parent component must pass thatprops, otherwise a warning will be thrown.

  3. **default**: forpropsset a default value. If the parent component does not pass thatprops, the child component will use the default value.

  4. **validator**: custom validation function, used to validatepropswhether the value meets specific conditions.

Notes

  1. One-way data flow: In Vue.js,propsis one-way, meaning data can only flow from the parent component to the child component. A child component should not directly modifypropsthe value. If you need to modify it, you can notify the parent component to make the change by triggering an event.

  2. Naming conventions：propsIt is recommended to use camelCase for naming, for exampleuserName. When passingprops, it is recommended to use kebab-case delimiter, for exampleuser-name。

  3. Dynamic props: can be achieved throughv-bindor:dynamic bindingprops, for example:message="parentMessage"。

Vue3 选项式 APIVue3 Options API

Other extensions