Este artículo se refiere a los documentos oficiales para compilar un código más detallado y es un tutorial más seguro para que los principiantes lean y aprendan.
Este artículo proviene del documento oficial:
http://cn.vuejs.org/guide/components.html
¿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.
Definición de componentes
① Función de componentes:
【1】 extender los elementos HTML y encapsular el código reutilizable;
【2】 Los componentes son elementos personalizados, y el compilador de VueJS puede agregarles funciones especiales;
【3】 En algunos casos, los componentes pueden estar en forma de elementos HTML nativos, que se extienden de manera similar a la IS.
② Escriba un componente estándar:
Se divide en los siguientes pasos:
[1] El lugar donde se monta el componente debe ser el elemento HTML representado por la instancia de Vue. Específicamente, por ejemplo, el elemento HTML como <div ID = "App”> </div> arriba y sus nodos infantiles;
【2】 Defina un componente, use
var variable name = vue.extend ({plantplate: "Aquí está el contenido de plantilla de html"}) se crea en forma de "var btn = vue.extend ({plantilla:" <boton> Este es un botón </boton> "})【3】 Registre el componente definido a la instancia VUE, que permitirá que la etiqueta especificada sea reemplazada por el contenido del componente.
Como código:
// registrarlo en vue.component ("add-button", btn);Específicamente, cada una de las siguientes etiquetas (dentro del alcance de la instancia raíz de Vue)
<Dext-Button> </d add-Button>
Será
<botón> Este es un botón </botón>
Reemplazado.
[4] El método anterior es el registro global (la etiqueta adición-botón de cada instancia de Vue será reemplazada por lo que definimos);
La solución es el registro local.
Por ejemplo, el código: (este es el atributo de plantilla establecido. También puede colocar la etiqueta <d add-button> </ addbutton> en la etiqueta <Div id = "App"> </div> cuando este atributo no está disponible.
<div id = "app"> </div> <script> // Defina un componente var btn = vue.extend ({plantlate: "<boton> Este es un botón </boton>"}) vue.component ("add-button", btn); // Cree una instancia raíz, es decir, que Vue surta efecto en esta raíz var vm = new vue ({el: '#app', plantlate: "<Dext-Button> </addbutton>"}); </script>③ Componentes de registro local:
En pocas palabras, solo en vigencia en esta instancia de Vue. El método específico es omitir el paso de registro;
Luego, al declarar la instancia de Vue, se agregará a la propiedad de componentes (es un objeto, colocado en forma de kV) (tenga en cuenta que esta palabra tiene una S) más s).
Como código:
<div id="app"> </div> <script> //Define a component var btn = Vue.extend({ template: "<button>This is a button</button>" }) //Create a root instance, that is, let Vue take effect on this root var vm = new Vue({ el: '#app', template: "<add-button></add-button>", components: { "add-botton": btn}}); </script>Nota:
Según el tutorial oficial, este método (que se refiere al registro local) también es aplicable a otros recursos, como directivas, filtros y transiciones.
④ Pasos de simplificación:
【1】 Definición de los componentes y los componentes de registro se completan en un solo paso:
// Defina un componente vue.component ("add-button", {plantplate: "<boton> Este es un botón </boton>"});【2】 Durante el registro local, se completa el paso de definición y registro:
// Cree una instancia raíz, es decir, que Vue surta efecto en esta raíz var vm = new vue ({el: '#app', plantlate: "<d add-button> </add-button>", componentes: {"add-button": {plantate: "<botte> Esto es un botón </boton>"}});⑤ atributos de datos
No es posible agregar directamente los atributos de datos al componente (inválido);
La razón es que si esto se hace, el atributo de datos del componente puede ser un objeto, y este objeto también puede pasar externamente (por ejemplo, declara primero un objeto, y luego el objeto es el valor de los datos), lo que puede hacer que todas las copias del componente compartan un objeto (que fallece externamente), que obviamente es incorrecto.
Por lo tanto, el atributo de datos debe ser una función, y luego hay un valor de retorno, que es el valor del atributo de datos.
Y este valor de retorno debe ser un objeto nuevo (es decir, copia profunda, evitando múltiples componentes compartiendo un objeto);
Como código:
var vm = new Vue ({el: '#App', Template: "<Dost-Button> </ add-Button>", componentes: {"add-button": {platplate: "<botón> Este es un botón {{btn}}} </botón>", data: function () {return {btn: "123"};}}}};Además, si este es el caso, el valor de BTN es el mismo (porque en realidad comparten un objeto)
<div id = "app"> </iv> <div id = "app2"> </div> <script> var obj = {btn: "123"}; var vm = new Vue ({el: '#App', Template: "<Add-button> </add-Button>", Components: {"add-Button": {Template: "<botte> Este es un botón {{btn}}} </botte>", data: function () {return obj;}}}}); obj.btn = "456"; var vm2 = new Vue ({el: '#app2', plantate: "<Dext-Button> </d add-Button>", componentes: {"add-button": {platplate: "<boton> esto es un botón {{btn}}} </botte>", data: function () {return obj;}}}}); </script>Nota:
Cuando el atributo EL se usa en vue.extend (), también debe ser una función.
⑥Is características:
[1] Según el tutorial oficial, algunos elementos HTML tienen restricciones sobre qué elementos se pueden colocar en él;
Pero de hecho, no encontré ningún problema con mi propia prueba, así que no lo entiendo.
【2】 Dame una URL, si algo realmente sucede, lo estudiaré.
http://cn.vuejs.org/guide/components.html#u6a21_u677f_u89e3_u6790
Lo anterior es un análisis de ejemplo de la definición del componente VueJS en el octavo capítulo de Vuejs introducido a usted. 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!