Este artículo proviene del documento oficial:
http://cn.vuejs.org/guide/components.html#props
Este tutorial es un tutorial más detallado y más completo compilado por el editor en combinación con documentos oficiales, que es especialmente adecuado para principiantes.
Entrega de datos de accesorios
①Cape de instancias de componentes:
Está aislado y, en pocas palabras, los valores no se comparten entre componentes, incluso si hay un atributo del mismo nombre.
<div id = "app"> <d add> </add> <el> </el> </div> <script> var vm = new Vue ({el: '#app', componentes: {"add": {Template: "<boton> btn: {{btn}} </boton>", data: function () {return {btn: "123"}}; Template: "<boton> btn: {{btn}} </boton>", data: function () {return {btn: "456"}; </script>El resultado de renderizado es:
2 botones, el primero tiene un valor de 123 y el segundo tiene un valor de 456 (aunque ambos son BTN)
② Use accesorios para vincular datos estáticos:
[1] Este método se utiliza para pasar cadenas, y el valor se escribe en el elemento personalizado del componente principal.
【2】 El siguiente ejemplo no puede pasar el valor en el atributo de datos del componente principal
【3】 sobrescribirá el valor del mismo nombre en el atributo de datos de la plantilla.
Código de muestra:
<div id = "app"> <add btn = "h"> </d add> </div> <script> var vm = new Vue ({el: '#App', data: {h: "hello"}, componentes: {"add": {props: ['btn'], template: "<boton> btn: {{{btn}}} <</</button>", data () {button> ", data: data (data: data: data: data: {button>". {btn: "123"}; </script>Bajo este método de escritura, el valor de BTN es H, no 123, o Hello.
【4】 Método de escritura de camello
Si la interpolación es camello,
En la etiqueta HTML, dado que las características de HTML son insensibles al caso (como Li y Li son los mismos), los valores que se pueden pasar en la etiqueta HTML deben escribirse como una línea horizontal corta (como la prueba BTN) para ser sensibles a la caja.
En la matriz de accesorios, debe ser consistente con la interpolación y escrito como camello (como BTNTest).
Por ejemplo:
Props: ['Btntest'], Template: "<boton> btn: {{btntest}} </boton>",Escritura correcta:
<Agregar btn-test = "h"> </d add>
Si la interpolación se escribe en un tipo de línea horizontal corto, o la etiqueta HTML está escrita en un estilo de camello, no entrará en vigencia normalmente. (A menos que la interpolación no esté escrita como omitiendo camello, el límite de casos)
③Bind Datos dinámicos utilizando accesorios:
En pocas palabras, es hacer que una cierta interpolación del componente infantil sea consistente con los datos del componente principal.
La forma estándar de escribirlo es (usando V-Bind):
<Agregar víndico V: el valor del componente infantil = "Propiedad del componente principal"> </ add>
Como código
<div id="app"> <add v-bind:btn="h"></add> </div> <script> var vm = new Vue({ el: '#app', data: { h: "hello" }, components: { "add": { props: ['btn'], template: "<button>btn: {{btn}}</button>", data: function () {return {'btn': "123"}; // El valor del mismo nombre del componente infantil se sobrescribe}}}); </script>ilustrar:
【1】 El valor de H en los datos del componente principal utilizados por BTN;
【2】 El valor de retorno en la función de los datos del componente infantil se sobrescribe.
[3] En otras palabras, se usa el valor del componente principal (basado en el nombre del atributo), y el valor de la etiqueta se usa como una cadena.
【4】 Todavía necesita usar accesorios, de lo contrario, usará el valor de BTN en sus datos
④ Sintaxis literal y dinámica:
[1] En pocas palabras, si no agrega unión V, pasa una cantidad literal, es decir, se trata como una cadena (por ejemplo, 1 también es una cadena, no un tipo de número);
【2】 Agregar unión en V, se pasa la expresión JS (por lo que se puede pasar el valor del componente principal);
【3】 Después de agregar vínculo V, si se puede encontrar el valor del componente principal, entonces se usa el valor del componente principal; Si no hay uno correspondiente, se considera una expresión JS (por ejemplo, 1+2 se considera 3, {a: 1} se considera un objeto);
Como código:
<div id = "app"> <add v-bind: btn = "1+2"> </d add> </div> <script> var vm = new Vue ({el: '#app', data: {h: "hello"}, componente: {"add": {{'btn'], plantplate: "<button> btn: {{btn}} }); </script>El valor de BTN aquí es 3 (en lugar de 1+2 como cadena sin agregar vínculo V)
⑤Props Tipo de enlace:
[1] En pocas palabras, se divide en dos tipos, a saber, la unión unidireccional (el componente principal puede afectar el componente infantil, pero lo contrario no es posible) y la unión bidireccional (el componente infantil también puede afectar el componente principal);
【2】 Ejemplo de enlace unidireccional: (predeterminado o uso .on)
<div id="app"> Parent component: <input v-model="val"><br/> Child component: <test v-bind:test-Val="val"></test> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, components: { "test": { props: ['testVal'], template: "<input v-model = 'testVal'/> "}}}); </script>ilustrar:
Cuando se cambia el valor del componente principal, el valor del componente infantil también cambia;
Cuando se cambia el valor del componente infantil, el valor del componente principal no cambiará. Si el valor del componente principal se modifica nuevamente, el componente infantil se sincronizará nuevamente.
También se debe tener en cuenta que si un componente infantil quiere estar unido sincrónicamente, la entrada del componente infantil debe ser V-Modelo, no un atributo de valor (que solo puede ser un solo elemento de enlace, y el enlace se perderá después de modificar el valor del componente infantil)
【3】 Bi-Way Binding:
Se requiere ".sync" como modificador
Como ejemplo:
<Div ID = "App"> Componente principal: <input v-model = "val"> <br/> componente infantil: <test: test.sync = "val"> </pest> </div> <script> var vm = new Vue ({el: '#App', data: {val: 1}, componentes: {"Test": {props: ['test'], "Template <inyer <inyer <inyer <inyer <inyer <inyer <inyer <inyer <inyer <inyer <inyer <inyer <inyer <inyer <inyer <inyer <inyer <iny". v-model = 'test'/> "}}}); </script>El efecto es que no importa qué valor cambie, el otro cambiará en consecuencia.
【4】 Verificación de accesorios:
En pocas palabras, cuando el componente obtenga datos, se usa para la verificación, y solo se utilizará si las condiciones se encuentran.
El método de escritura es convertir los accesorios en un objeto, el valor que se verifica es la clave del objeto, y la condición de verificación es el valor correspondiente a la clave.
Por ejemplo:
Props: {test: {twoway: true}},Verifique que la variable de prueba esté en dos vías, y si no es así, se informará un error. (Tenga en cuenta que esto no se puede usar para verificar la unión unidireccional).
El código de muestra es el siguiente:
<div id="app"> Parent component: <input v-model="val"><br/> Child component: <test :test="val"></test> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, components:{ test:{ props: { test: { twoWay: true } }, template: "<input v-model = 'test'/> "}}}); </script>Para obtener más tipos de verificación, consulte el tutorial oficial:
http://cn.vuejs.org/guide/components.html#prop__u9a8c_u8bc1
Lo anterior es una explicación detallada del alcance de los componentes y los ejemplos de transferencia de datos de los accesorios del noveno artículo de Vuejs presentado por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!