¿Qué son los componentes?
El componente es una de las características más potentes de Vue.js. Los componentes pueden extender los elementos HTML y encapsular el código reutilizable. En un nivel superior, los componentes son elementos personalizados, y el compilador de Vue.js le agrega características especiales. En algunos casos, los componentes también pueden estar en forma de elementos HTML nativos, extendidos con la función IS.
Este artículo es una explicación más detallada compilada por el editor basado en los documentos oficiales. El código es más completo y perfecto, lo cual es muy adecuado para principiantes para aprender.
Documentación oficial:
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
Componentes: los elementos varios se detallan de la siguiente manera:
① Componentes y V-for
En pocas palabras, los componentes se reutilizan varias veces;
Por ejemplo, una cierta fila en la tabla, o la pantalla de la ventana del producto de comercio electrónico (ventana única), puede convertirse en componentes que se pueden reutilizar;
Simplemente escriba uno de ellos como componente y luego haga de la fuente de datos una matriz (u objeto, pero personalmente creo que es una matriz). A través del recorrido V-por, cada instancia del componente puede obtener una de las matrices, generando así todos los componentes.
Debido a la multiplexación, los accesorios deben usarse para unir el resultado transversal I y los datos vinculados a los accesorios. El método de enlace es el mismo que la forma ordinaria y está unida en la plantilla.
Código de muestra:
<div id = "app"> <button @click = "a KnowChildren"> Haga clic para dejar que el componente infantil visualice </botón> <trabe> <tr> <td> índice </td> <td> id </td> <td> descripción </td> </tr> <tr is = "the tr" v-for = "i en items" V-bind: id = "i": "$" Índice "</" </"</" </ttil. </div> <script> var vm = new Vue ({el: '#App', Data: {elementos: [1, 2, 3, 4]}, métodos: {a KnowChildren: function () {// Switch COMPONENTE PANTALLA CONSOLE.LOG (this. $ Children);}}, componentes: {thetr: {// El primer componente de componente de componente infantil: "<tr>" + " +" + " +" + " "<TD> {{index}} </td>" + "<td> {{id}} </td>" + "<td> Este es el componente infantil </td>" + "</tr>", props: ['id', 'index']}}}); </script>ilustrar:
【1】 ¡Recuerde poner los datos que se pasarán en accesorios!
【2】 Index de enlace e índice $ índice, porque el índice comienza en 0, por lo que la columna donde el índice se encuentra comienza en 0; ID está obligado a que atraviesa elementos, por lo que ID comienza en 1.
[3] Puede obtener componentes infantiles a través de esto. $ Niños en el componente principal (pero es más problemático, especialmente cuando hay muchos componentes, es difícil de ubicar);
② Escriba componentes reutilizables:
En pocas palabras, es posible que un componente de uso único (utilizado aquí solo, no reutilizado) esté estrechamente acoplado a otros componentes, pero un componente reutilizable debería definir una interfaz pública clara. (De lo contrario, ¿cómo lo usan otros?)
Los componentes reutilizables básicamente necesitan interactuar con el exterior, y un componente y la interfaz interactiva divulgada externamente incluyen:
【1】 Props: permita que los datos del entorno externo se pasen a los componentes;
【2】 Evento: permita que el componente active la acción del entorno externo, es decir, al agregar una directiva V-ON en el punto de montaje, los métodos del componente principal se activan al mismo tiempo cuando se activan los eventos del componente infantil;
[3] Ranura: distribución, lo que permite insertar el contenido del componente principal en la estructura de la vista del componente infantil.
Como código:
<div id="app"> <p>This is the first parent component</p> <widget :the-value="test" @some="todo"> <span>【The content of the first parent component inserted】</span> </widget> </div> <div id="app2"> <p>This is the second parent component</p> <widget @some="todo"> </widget> </div> <script> vue.component ("widget", {plantplate: "<button @click = 'dosomthing'> <slot> </lot> Este es un componente reutilizado, haga clic en {{theValue}} </button>", Métodos: {Dosómetros: function () {this. $ emit ("algunos");}}, eventos: {Some: Some: {) console.log ("widget hacer clic"); var vm_other = new vue ({el: '#app2', data: {name: "primero"}, métodos: {toDo: function () {console.log ("Este es otro componente principal")}}}); </script>ilustrar:
[1] La ranura de distribución se usa en el primer componente principal, y los accesorios se usan para pasar el valor (pasar el valor de la prueba al valor del componente infantil);
[2] Entre los dos componentes, después de hacer clic en el componente infantil, se ejecuta el método de tendhos en los métodos, y luego se ejecuta algún evento en eventos. Luego, a través del punto de montaje @Some = "TODO" para unir el evento del componente infantil y el método TODO del componente principal.
Por lo tanto, después de hacer clic en el componente infantil, el método TODO del componente principal eventualmente se ejecutará.
[3] Cambiar el valor pasado al componente infantil en el componente principal cambiará sincrónicamente el valor del componente infantil (es decir, ambos estarán unidos por datos);
COMPONENTES DE ASINÍCULA:
Según mi comprensión, en pocas palabras, una aplicación grande tiene múltiples componentes, pero algunos componentes no necesitan cargarse de inmediato, por lo que se dividen en múltiples componentes (por ejemplo, aquellos que necesitan cargarse de inmediato, pero no de inmediato);
Si necesita cargarse de inmediato, obviamente es mejor ponerlo en el mismo archivo (o solicitarse en el mismo lote);
Si no es necesario cargarlo de inmediato, se puede colocar en otros archivos, pero cuando sea necesario, Ajax lo solicitará al servidor;
Las siguientes solicitudes son componentes asincrónicos;
La función de Vue.js es la función de Vue.js, que permite que el componente se define como una función de fábrica y analice dinámicamente la definición del componente.
Se puede usar con Webpack.
En cuanto a cómo usarlo en detalle, no lo entiendo del todo. No puedo escribirlo claramente en el tutorial, así que lo dejaré de lado y esperaré a que lo estudie cuando sea necesario.
Enlace:
http://cn.vuejs.org/guide/components.html#u5f02_u6b65_u7ec4_u4ef6
④ Convenciones de nomenclatura de resumen:
En pocas palabras, las etiquetas HTML (como Div y Div son las mismas) y las características (como escribir instrucciones como V-ON en lugar de Von) son insensibles a los casos.
Los nombres de recursos a menudo se escriben en forma de camello (como Camelcase como camello), o en forma de letras mayúsculas de la primera letra de la palabra (como Pascalcase, no sé cómo llamar a esto, pero rara vez escribo esto).
Vue.component ("mytemplate", {// ...... omitido})Vue.js puede reconocerlo automáticamente y convertirlo.
<My-Template> </plemplate>
La plantilla anterior puede reemplazar automáticamente esta etiqueta.
⑤ Componentes recursivos:
En pocas palabras, un componente recursivo es un componente que incrusta su propia plantilla en sí misma.
Si un componente quiere recurrir, necesita el atributo de nombre, y Vue.component viene con su propio atributo de nombre.
Probablemente esto se ve así
<div id = "app"> <my-template> </my-template> </div> <script> vue.component ("mytemplate", {Template: "<p> <my-template> </my-template> </p>"})Esta es una recursión infinita, que definitivamente no es posible. Por lo tanto, es necesario controlar el número de capas de su recursión, por ejemplo, controlar la recursión a través de los datos y detener la recursión cuando los datos están vacíos.
El código de muestra es el siguiente:
<ul id = "app"> <li> {{b}} </li> <my-template v- if = "a": a = "aa": b = "ab"> </mymplate> </ul> <script> vue.component ("mytemate", {Template: '<ul> <li> {{b}}}}}} <li> <li> v-if="a" :a="aa" :b="ab"></my-template></ul>', props: ["a", "b"] }) var data = { a: { a: { a: { a: 0, b: 3 }, b: 2 }, b: 1 } var vm = new Vue({ el: '#app', data: data, methods: { todo: function () {this.test += "!"; </script>ilustrar:
[1] Al pasar hacia abajo, el valor de A y el valor de B se pasan a través de los accesorios, donde el valor de A se usa como fuente de datos para los valores de A y B del componente después de la recursividad;
Luego determine si existe el valor de un componente recursivo y pasado, y si es así, continúe recurriendo;
Si el valor de A no existe, entonces se detiene la recursión.
⑥ Ejemplo de fragmento:
En pocas palabras, la llamada instancia de fragmento significa que la plantilla del componente no está bajo un nodo raíz:
Código de instancia de fragmento:
Vue.component ("mytemplate", {plantlate: '<div> 1 </div>' + '<div> 2 </div>',})Instancia de no fragmento:
Vue.component ("mytemplate", {plantlate: '<div>' + '<div> 1 </div>' + '<div> 2 </div>' + '</div>',})Se ignoran las siguientes características de las instancias de fragmentos:
[1] Instrucciones de control sin procesos sobre elementos de componentes (como instrucciones de show en V escritas en el punto de montaje y controladas por el componente principal, pero tenga en cuenta que V-IF pertenece a las instrucciones de control del proceso);
【2】 Característica no PROPS (tenga en cuenta que los accesorios no serán ignorados, además de los accesorios se escriben en el punto de montaje);
[3] Transición (es decir, el atributo de transición será ignorado);
Para obtener más referencia a la documentación oficial:
http://cn.vuejs.org/guide/components.html#u7247_u65ad_u5b9e_u4f8b
⑦ Plantilla en línea
Referencia: http://cn.vuejs.org/guide/components.html#u5185_u8054_u6a21_u677f
Lo anterior es el componente del Capítulo 13 de Vuejs que el editor le presentó: artículos varios. 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!