Guía de Vue Props

En esta guía, aprenda qué son los accesorios de Vue, cómo registrarlos y usarlos, cómo pasar datos usando accesorios, validarlos, establecer tipos de datos, valores predeterminados y más.

Introducción

Vue es un marco de JavaScript que permite a los desarrolladores crear componentes que se utilizan para dividir la interfaz de usuario en partes más pequeñas, en lugar de crear toda la interfaz de usuario en un solo archivo. Cuando usamos componentes, es posible que deseemos pasar datos del componente principal al componente secundario en algún momento, esto generalmente se hace con propiedades, también conocidas como props.

En esta guía, profundizaremos en los accesorios, veremos cómo funcionan los accesorios, los distintos tipos de accesorios, cómo pasar varias formas de datos y mucho más.

¿Qué son los accesorios?

Accesorios puede ser un concepto crucial para entender cuando se trabaja con componentes en Vue. Props, que significa propiedades, nos permite pasar datos y funcionalidad de un componente a otro. Es importante comprender que el flujo de datos de accesorios es unidireccional: podemos pasar datos solo de un componente principal a un componente secundario, no al revés.

{.icon aria-hidden=“true”}

Nota: Los accesorios son de solo lectura, lo que significa que el componente secundario no puede modificarlos porque los datos son propiedad del componente principal y solo se transmiten al componente secundario para que los lea.

Declaración de accesorios en Vue

Registrar accesorios es simple; todo lo que tenemos que hacer es agregarlo a la matriz props en la etiqueta <scripts>. Luego, podemos usarlo en la sección <plantilla> de nuestra aplicación. Esto ocurre en el componente secundario, donde los datos se reciben del componente principal:

1
2
3
4
5
6
7
8
9
<template>
  <p>{{ name }}</p>
</template>

<script>
export default {
  props: ['name']
}
</script>

Esta es la sintaxis Componente de archivo único. Alternativamente, puede registrar accesorios para un componente específico a través de:

1
2
3
4
Vue.component('user-profile', {
  props: ['name'],
  template: '<p>My name is {{ name }}</p>'
});

Declaración de múltiples accesorios en Vue

props son una matriz - puede agregar tantos como desee:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<template>
  <p>My name is {{ name }} and I am {{ age }} years.</p>
</template>

<script>
export default {
  props: [
    'name', 
    'age'
  ],
}
</script>

Tipos de valores de accesorios

Hasta ahora, solo hemos pasado valores de cadena, pero, en realidad, cualquier tipo de datos se puede pasar como accesorio, incluidos números, objetos, matrices, booleanos, métodos, fechas, etc.

{.icon aria-hidden=“true”}

Nota: Cuando usamos un método estático para pasar un número, objeto, matriz y valores booleanos, debemos vincularlos para decirle a Vue que se trata de una expresión de JavaScript en lugar de una cadena (que coincide con el nombre del método). ).

Entonces, para pasarlos, los pasamos como una expresión de JavaScript (entre comillas), que se evalúa al tipo de datos correcto implícitamente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
  <UserProfile :age="22" />
  <UserProfile :married="false" />
  <UserProfile :hobbies="['Singing', 'Gaming', 'Reading']" />
  <UserProfile
    :name="{
      firstName: 'John',
      lastName: 'Doe'
    }"
    />
</template>

Sin embargo, las conversiones implícitas no están exentas de errores en la práctica. En la mayoría de los casos, querrá especificar los tipos explícitamente.

Especificación explícita de tipos de accesorios {#especificaciónexplícita de tipos de accesorios}

Sabiendo que podemos pasar cualquier tipo de datos como accesorio, la mejor práctica es especificar el tipo de accesorio que queremos usar declarándolos como parte de un objeto en lugar de una matriz, y especificar explícitamente el tipo de ese valor. Esto es útil porque Vue envía una alerta de advertencia (en modo de desarrollo) a la consola si el tipo de datos pasados ​​no coincide con el tipo de prop especificado:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<template>
  <p>My name is {{ name }} and I am {{ age }} years.</p>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number,
  }
}
</script>

Pasando accesorios a componentes

Pasar accesorios a componentes en Vue es similar a pasar atributos HTML a etiquetas HTML, y esto puede aceptar todo tipo de datos, incluidos los métodos. Por ejemplo, si tenemos un componente de perfiles y queremos pasar los detalles del usuario al componente de usuario, podemos hacer algo como esto:

1
2
3
4
5
6
<template>
  <UserProfile
        v-bind:name="user.name"
        :img="user.image"
  />
</template>

Accesorios estáticos y dinámicos

Los accesorios se pueden pasar de una de dos maneras: como un valor estático o como un valor dinámico. Por estático, queremos decir que estos valores se pasan directamente al componente sin necesidad de v-bind o : (punto y coma):

1
2
3
<template>
  <UserProfile name="John Doe" />
</template>

Mientras que para valores dinámicos usamos v-bind o su atajo ::

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>
  <UserProfile :name=name />
</template>

<script>
export default {
  <!-- ... -->
  data() {
    return {
      name: 'John Doe'
    }
  },
  <!-- ... -->
}
</script>

Los valores dinámicos se pueden heredar de la opción data() de nuestro script de componentes.

Paso de apoyos con operadores ternarios {#paso de apoyos con operadores ternarios}

A menudo queremos pasar diferentes datos basados ​​en el valor de una condición. En ese caso, el operador ternario es útil, porque podemos usarlo dentro de un valor prop:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div id="app">
    <Home :title="isHomepage? 'Welcome to the homepage' : 'This is not the Homepage'" />
  </div>
</template>

<script>
import Home from './components/Home'
export default {
  <!-- ... -->
  data(){
    return{
      isHomepage: true,
    }
  },
  components: {
    Home
  }
}
</script>

En este ejemplo, hemos verificado el valor loggedIn - dado que es true (un usuario ya ha iniciado sesión), el valor resultante será Log Out.

Pasar métodos como accesorios {#pasar métodos como accesorios}

También es posible pasar métodos como accesorios a un componente secundario, que funciona de manera similar a pasar otros tipos de datos:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<template>
  <ChildComponent :method="myFunction" />
</template>

<script>
export default {
  <!-- ... -->
  methods: {
    myFunction() {
      <!-- ... -->
    }
  }
};
</script>

Trabajar con accesorios {#trabajarcon accesorios}

Como se indicó anteriormente, el objetivo principal del uso de accesorios es transmitir datos. Digamos que estamos creando una aplicación que mostrará los detalles del usuario; preferiremos crear componentes reutilizables para que podamos pasar estos datos como accesorios, en lugar de crear manualmente un componente separado para cada usuario. Vamos a crear un componente principal para esa aplicación:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div id="app">
    <UserProfile :name='userName' age='22' />
    <UserProfile :name='userName' age='18' />
    <UserProfile :name='userName' age='27' />
  </div>
</template>

<script>
import UserProfile from './components/UserProfile'

export default {
  <!-- ... -->
  data(){
    return{
      userName:"John Doe",
    }
  },
  components: {
    UserProfile
  }
}
</script>

Y así es como se verá el componente secundario:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>
  <div>
    <h2>My name is {{name}} and I am {{age}} years old.</h2>
  </div>
</template>

<script>
export default {
  <!-- ... -->
  props:{
    name:String,
    age:Number,
  }
}
</script>

Validación de accesorios

Anteriormente, vimos que agregar tipos de accesorios ayuda a verificar el tipo de datos devueltos por los accesorios, que es una forma de validar los accesorios, pero también podemos agregar la clave requerida y su valor al accesorio, como se muestra a continuación:

1
2
3
4
5
6
props: {
  name: {
    type: String,
    required: true
  }
}

Configuración de valores predeterminados de propiedad

En algunos casos, es posible que deseemos establecer valores predeterminados para que, si el componente secundario no puede obtener datos del componente principal, dichos datos se puedan procesar:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
props: {
  studentUserName: {
    type: String,
    required: true,
    default: "student##"
  },
  studentPassword: {
    type: String,
    required: true,
    default: "password123"
  },
  userImg: {
    type: String,
    default: "../default-avatar.jpg"
  },
},

{.icon aria-hidden=“true”}

Nota: El valor predeterminado también puede ser un objeto o un método que devuelve un valor.

Conclusión

Los accesorios son una parte crucial de Vue cuando se usan componentes. En este artículo, hemos analizado qué son los accesorios, cómo usarlos en Vue, cómo declararlos y registrarlos, establecer valores predeterminados, validarlos, etc.