Atributos props de Vue3

Vue3 选项式 APIAPI de Opciones de Vue3

propses una forma de transmitir datos entre componentes.

En Vue.js, el componente padre puede, a través depropstransmitir datos al componente hijo. Una vez que el componente hijo recibe estos datos, puede renderizar o realizar otras operaciones según los datos.

Comprensión mediante analogía

Se puedepropsimaginar como un cartero. El componente padre es el remitente, el componente hijo es el destinatario. El componente padre transmite los datos (la carta) a través deprops(el cartero) al componente hijo. Una vez que el componente hijo recibe los datos, puede procesarlos según el contenido de los datos.

¿Cómo usar los props?

Usar los props en Vue.jspropses muy sencillo. A continuación, usaremos un ejemplo para explicar cómo usarprops。

Ejemplo: transmisión y recepción de props

Supongamos que tenemos un componente padreParentComponenty un componente hijoChildComponent. Queremos que el componente padre transmita un mensaje al componente hijo.

1. Componente padre (ParentComponent.vue)

Ejemplo

<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. Componente hijo (ChildComponent.vue)

Ejemplo

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

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

Explicación

  1. Componente padre: en el componente padre, a través de:message="parentMessage"va aparentMessagetransmitimos datos al componente hijo.parentMessagees una variable definida en el componente padre, cuyo valor es'Hello from Parent!'。

  2. Componente hijo: en el componente hijo, usamospropspara recibir los datos transmitidos por el componente padre.messagees un prop definido en el componente hijoprops, cuyo tipo esString, y se establece comorequired: true, lo que indica que estepropses obligatorio.

  3. Renderizado: cuando el componente hijo recibemessage, lo renderiza en la plantilla, mostrándolo como<p>Hello from Parent!</p>。

Tipos y validación de props

En Vue.js, se puedenpropsespecificar tipos y reglas de validación, para garantizar que los datos transmitidos cumplan con lo esperado.

Ejemplo: tipos y validación

Ejemplo

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

Explicación

  1. **type**: especificapropsel tipo de datos del prop. Puede serString、Number、Boolean、Array、Object, etc.

  2. **required**: especificapropssi el prop es obligatorio. Si se establece comotrue, el componente padre debe transmitir ese propprops; de lo contrario, se mostrará una advertencia.

  3. **default**: establece parapropsun valor predeterminado. Si el componente padre no transmite ese propprops, el componente hijo utilizará el valor predeterminado.

  4. **validator**: función de validación personalizada, utilizada para verificarpropssi el valor del prop cumple con condiciones específicas.

Notas

  1. Flujo de datos unidireccional: en Vue.js,propslos props son unidireccionales, es decir, los datos solo pueden fluir del componente padre al componente hijo. El componente hijo no debe modificar directamentepropsel valor de los props. Si es necesario modificarlo, se puede notificar al componente padre mediante el disparo de eventos para que realice la modificación.

  2. Convención de nomenclatura：propspara el nombre de los props se recomienda usar nomenclatura camelCase, por ejemplouserName. Al transmitir los props en el componente padreprops, se recomienda usar el separador con guiones, por ejemplouser-name。

  3. Props dinámicos: se puedenv-bindo:enlazar dinámicamenteprops, por ejemplo:message="parentMessage"。

Vue3 选项式 APIAPI de Opciones de Vue3

Otras extensiones