¿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
Los componentes dinámicos se describen a continuación:
① Simple:
Es colocar varios componentes bajo un punto de montaje, y luego decidir cuál mostrar en función de una variable del componente principal, o ninguno de ellos se muestran.
② Switch dinámico:
Use la etiqueta del componente en el punto de montaje y luego use vínculo V: IS = "nombre del componente" para encontrar automáticamente el nombre del componente coincidente. Si no, no se mostrará;
Para cambiar el componente montado, solo necesita modificar el valor de la Directiva IS.
Como en el código de ejemplo:
<div id = "app"> <button @click = "toshow"> Haga clic para dejar que el componente infantil visualice </botón> <componente v-bind: is = "what_to_show"> </component> </div> <script> var vm = new Vue ({el: '#app', data: {what_to_show: "primero"}, métodos: {Tostow: function () {{/// ["Primero", "Segundo", "tercero", "]; 1 </div> "}, segundo: {// La plantilla de componente de segundo hijo:" <Div> Aquí está el componente infantil 2 </div> "}, tercero: {// La tercera plantilla de componente infantil:" <Div> Aquí está el componente infantil 3 </div> "},}}); </script>ilustrar:
Al hacer clic en el botón del componente principal, cambiará automáticamente para mostrar un componente infantil (determinado en función del valor de la variable que_to_show).
③ Mantener alivio
En pocas palabras, el componente que se ha cambiado (no se muestra actualmente) se elimina directamente.
Mirando esto. $ Atributo de niños en el componente principal, puede encontrar que cuando existe el componente infantil, la longitud del atributo es 1, y cuando el componente infantil no existe, la longitud del atributo es 0 (el componente infantil no se puede obtener);
Si el componente infantil necesita ser cambiado, todavía es necesario mantenerlo en la memoria para evitar volver a reproducir cuando aparece la próxima vez. Luego debe agregar el atributo Keep-Alive a la etiqueta del componente.
Como código:
<div id = "app"> <button @click = "toshow"> Haga clic para dejar que el componente infantil visualice </botón> <componente v-bind: is = "what_to_show" keep-alive> </componente> </div> <script> var vm = new vue ({el: '#app', data: data: what_to_show: "primero"},}: {toshow: toshow (toshow () var arr = [primero "," segundo "," tercero ","]; Plantilla de componente: "<Viv> Aquí está el componente infantil 1 </div>"}, segundo: {// La segunda plantilla de componente infantil: "<Div> Aquí está el componente infantil 2 </div>"}, tercero: {// La tercera plantilla de componente infantil: "<Div> aquí es componente infantil 3 </div>"},}); </script>ilustrar:
En el caso inicial, solo hay un elemento (primer componente) en el atributo VM. $ Children. Después de hacer clic en el botón para cambiar, hay dos elementos en el atributo VM. $ Children. Después de volver a cambiar, hay tres elementos (los tres subcomponentes se retienen en la memoria).
Después de eso, no importa cómo cambie, habrá tres elementos.
④ Activar gancho
En pocas palabras, es una carga perezosa.
Por ejemplo, al iniciar una solicitud AJAX, debemos esperar algún tiempo. Si necesitamos cargar la solicitud AJAX después de que se complete, entonces necesitamos usar el gancho de activación.
En términos de uso específico, Activate es un atributo al mismo nivel que los atributos, como la plantilla y los datos. La forma es una función. Hay un parámetro en la función de forma predeterminada. Este parámetro es una función. El componente se cambiará solo cuando se ejecute esta función.
Para probar su carga de retraso, en el lado del servidor, configuré eso cuando se inicia una determinada solicitud AJAX, retrasará 2 segundos antes de devolver el contenido. Por lo tanto, al cambiar el componente 2 por primera vez, debe esperar 2 segundos antes de cambiar con éxito:
<div id = "app"> <button @click = "toshow"> Haga clic para dejar que el componente infantil visualice </botón> <componente v-bind: is = "what_to_show"> </component> </div> <script> var vm = new Vue ({el: '#app', data: {what_to_show: "primero"}, métodos: {Tostow: function () {{/// [Primero "," Segundo "," tercero ","]; Template: "<Div> Aquí está el componente infantil 1 </div>"}, segundo: {// La plantilla de componente de segundo hijo: "<Div> Aquí está el componente infantil 2, aquí está el contenido después de Ajax: {{Hola}} </div>", data: function () {return {hola: "" "}, activado: function (hecho) conmutado. 3 </div> "}}}); </script>Efecto del código:
【1】 Al cambiar al componente 2 por primera vez, debe esperar 2 segundos antes de mostrar (porque se inicia AJAX);
[2] En el caso de Keep-Alive, al cambiar al Componente 2 el segundo o posterior, no hay necesidad de esperar; Pero el contenido de AJAX debe mostrarse dos segundos después de la primera vez que se inicia AJAX;
【3】 Sin mantener alive (no se guarda en la memoria después de cambiar), aún debe esperar al cambiar al componente 2 la segunda vez.
[4] Cuando espera, no afecta la conmutación nuevamente (es decir, cuando se espera el Componente 2, haga clic para cambiar nuevamente para cambiar directamente al Componente 3);
ilustrar:
【1】 activar se ejecutará solo cuando el componente se represente por primera vez, y la función se ejecutará solo una vez (el componente aparece retrasado cuando aparece el componente)
【2】 Cuando no hay Alive, cada vez que aparezca el componente del interruptor, se volverá a renderizar (porque el proceso de destrucción se ejecutó cuando se ocultó antes), por lo que se ejecutará el método de activación.
⑤ Modo de transición en modo de transición
En pocas palabras, deje que el componente dinámico cambie a la animación. (Recuerde las instrucciones en la sección de transición, las transiciones son adecuadas para componentes dinámicos)
Por defecto, la entrada y salida se completan juntos; (El contenido que entra puede aparecer debajo del contenido de salida, que se refiere al lado inferior del eje y. Después de salir, la entrada aparecerá en la posición correcta);
Cuando Transition-Mode = "Out-In", la animación es salir primero y luego ingresar;
Cuando Transition-Mode = "In-Out", la animación es la primera en y posterior (igual que los problemas propensos a ocurrir en el valor predeterminado);
Código de muestra: (usando el nombre de transición personalizado y el archivo animate.css)
<div id="app"> <button @click="toshow">Click to let the child component display</button> <component v-bind:is="which_to_show" transition="bounce" transition-mode="out-in"></component> </div> <script> Vue.transition("bounce", { enterClass: 'bounceInLeft', leaveClass: 'bounceOutRight' }) var vm = new vue ({el: '#app', data: {what_to_show: "first"}, métodos: {toshow: function () {// switch component visual var arr = ["primero", "segundo", "tercero", ""]; var. 1]; Data: function () {return {Hello: ""}}}, tercero: {// La tercera plantilla de componente infantil: "<Div> Aquí está el componente infantil 3 </div>"}}}); </script>Lo anterior es el componente dinámico del capítulo 12 de Vuejs introducido 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!