Cómo utilizar los accesorios de vue para pasar datos en el proyecto

Lo que les traigo esta vez es cómo usar vue props para transferir datos en el proyecto. ¿Cuáles son las precauciones al usar vue props para transferir datos? El siguiente es un caso práctico, echemos un vistazo.

En Vue, la relación entre los componentes principales y los componentes secundarios se puede resumir como accesorios que se transmiten hacia abajo y eventos que se transmiten hacia arriba. El componente principal envía datos al componente secundario a través de accesorios, y el componente secundario envía mensajes al componente principal a través de eventos. Veamos cómo funcionan.

I. Uso básico

Los componentes no se tratan solo de reutilizar el contenido de las plantillas, sino, más importante aún, de la comunicación entre componentes.

En el componente, use la opción props para declarar los datos recibidos del componente principal. Hay dos valores para los props, uno es una matriz de cadenas y el otro es un objeto.

1.1 Matriz de cadenas:

lt; p id="app4"gt;

lt; my-component4 message="Datos del componente principal"gt; lt;/mi-componente4gt;

lt;/pgt;

lt;/pgt;

Vue.component('mi-componente4', {

props: ['mensaje'],

plantilla: 'lt;pgt;{{message}}lt;/pgt;'

});

var app4 = new Vue({

el: '#app4'

}); El resultado de la representación es el siguiente:

lt; = " app4"gt;

lt;p>Datos del componente principal

lt;p>Datos del componente principal