Los accesorios de Vue le permiten registrar atributos personalizados en un componente. Descubre exactamente cómo usarlos.
Una de las características clave de Vue es su arquitectura modular, que le permite crear aplicaciones web combinando componentes pequeños y reutilizables. Esto le permite actualizar y mantener su aplicación web fácilmente.
Cada componente en Vue puede tener su propio conjunto de datos y métodos, que puede transmitir a sus componentes secundarios con accesorios. Aquí, aprenderá a usar accesorios en Vue para transmitir datos de componentes principales a secundarios.
¿Qué son los accesorios en Vue?
Los accesorios, abreviatura de "propiedades", son atributos personalizados en Vue que un componente principal puede transmitir a sus componentes secundarios.
En Vue, los componentes principales pasan accesorios a los componentes secundarios en un flujo unidireccional. Esto significa que los componentes secundarios solo pueden leer y utilizar estos accesorios pasados, pero no pueden modificar los datos.
El uso de accesorios le permite crear componentes reutilizables que puede aplicar en toda su aplicación. Los accesorios le ahorran tiempo y esfuerzo, ya que puede reutilizar componentes en lugar de crear nuevos componentes desde cero.
Cómo pasar accesorios en Vue
Pasar accesorios en Vue es simple y diferente de la forma en que pasa accesorios en reaccionar. Para pasar un accesorio de un componente principal a su componente secundario en Vue, use la opción de accesorios en el script del componente secundario.
Aquí hay un ejemplo:
El componente hijo
<plantilla>
<división>
<h1>{{ título }}h1>
<pag>{{ mensaje }}pag>
<pag>{{ dirección de correo electrónico }}pag>
división>
plantilla>
<guion>
exportación predeterminada {
nombre: "Componente secundario",
accesorios: ["título", "mensaje", "dirección de correo electrónico"],
};
guion>
El bloque de código anterior describe un componente secundario de Vue que utiliza accesorios para pasar datos de un componente principal. El componente incluye tres elementos HTML que muestran el título, mensaje, y dirección de correo electrónico propiedades con interpolación.
El accesorios opción en el componente secundario toma una serie de propiedades. Esta matriz define las propiedades que el componente secundario acepta del componente principal.
Aquí hay un ejemplo de un componente principal de Vue que pasa datos al componente secundario con accesorios:
componente principal
<plantilla>
<división>
<componente hijo
título = "Hola mundo"
mensaje="Este es un mensaje del componente principal"
emailAddress="[email protected]"
/>
división>
plantilla><guion>
importar ChildComponent desde "./components/ChildComponent.vue";
exportación predeterminada {
nombre: "Componente principal",
componentes: {
Componente hijo,
},
};
guion>
El componente principal en el bloque de código anterior pasa tres accesorios al componente secundario. El bloque de código pasa valores estáticos al título, mensaje, y dirección de correo electrónico accesorios.
También puede pasar valores dinámicos a sus accesorios con el unión en v directiva. unión en v es una directiva utilizado en Vue para enlazar datos a los atributos HTML.
Aquí hay un ejemplo del componente principal de Vue que utiliza el unión en v Directiva para pasar valores dinámicos a los accesorios:
componente principal
<plantilla>
<división>
<componente hijo
:título= "título"
:mensaje= "mensaje"
:dirección de correo electrónico = "dirección de correo electrónico"
/>
división>
plantilla><guion>
importar ChildComponent desde "./components/ChildComponent.vue";
exportación predeterminada {
nombre: "Componente principal",
componentes: {
Componente hijo,
},
datos() {
devolver {
título: "Bienvenido querido",
mensaje: "¿Cómo estás?"
dirección de correo electrónico: "[email protected]",
};
},
};
guion>
Utilizando el unión en v directiva para pasar datos al componente secundario, puede actualizar los valores de los accesorios en función del estado del componente principal. Por ejemplo, al cambiar el título propiedad de datos en el componente principal, el título prop pasado al componente secundario también se actualizará.
Este método de definir accesorios como una matriz de cadenas es un patrón abreviado. Cada una de las cadenas en la matriz representa un apoyo. Este método es ideal cuando todos los elementos de la matriz tienen el mismo tipo de datos JavaScript.
Definición de accesorios como un objeto en Vue
Definir accesorios como un objeto de JavaScript en lugar de una matriz permite una mejor personalización de cada accesorio. Definir accesorios como un objeto en un componente le permitirá especificar el tipo de datos esperado y el valor predeterminado de cada accesorio.
Además, puede marcar accesorios específicos según sea necesario, activando una advertencia si el accesorio no se proporciona cuando el componente está en uso. La definición de accesorios como un objeto ofrece varias ventajas sobre la definición de accesorios como una matriz, que incluyen:
- Definir el tipo de datos esperado y el valor predeterminado para cada accesorio hace que sea más fácil para usted y su equipo de desarrolladores comprender cómo usar exactamente el componente.
- Al marcar los accesorios como necesarios, puede detectar errores al principio del proceso de desarrollo y proporcionar más información al equipo de desarrolladores.
Aquí hay un ejemplo de cómo definir accesorios como un objeto en un componente Vue.js:
<plantilla>
<división>
<h1>{{ título }}h1>
<pag>{{ mensaje }}pag>
<pag>{{ dirección de correo electrónico }}pag>
división>
plantilla>
<guion>
exportación predeterminada {
nombre: "Componente secundario",
accesorios: {
título: {
tipo: Cadena,
predeterminado: "Título predeterminado",
},
mensaje: {
tipo: Cadena,
predeterminado: "Mensaje predeterminado",
},
dirección de correo electrónico: {
tipo: Cadena,
requerido: cierto,
},
},
};
guion>
Este bloque de código es un ejemplo de un componente Vue.js que usa accesorios para pasar datos de un componente principal a un componente secundario. El bloque de código define estos accesorios como objetos con un tipo y un valor predeterminado o un indicador obligatorio.
El bloque de código define el título y mensaje accesorios como cuerdas con un por defecto valor y el dirección de correo electrónico apoyo como un requerido cadena.
Elija el mejor método que se adapte a su aplicación Vue
Ha aprendido a definir accesorios como una matriz y como un objeto. Su preferencia debe adaptarse a las necesidades específicas de su aplicación.
Vue demuestra ser un marco JavaScript muy flexible. Ofrece una gran cantidad de métodos y opciones para lograr el mismo objetivo con diferentes ventajas para cualquiera de las opciones o métodos con los que elijas trabajar.