Esta información proviene del documento oficial: http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
Este artículo se basa en la documentación oficial, con explicaciones más detalladas y códigos más completos.
En pocas palabras, es más adecuado para principiantes leer
① 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 ","]; Template de componente: "<Div> Aquí está el componente infantil 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í es el componente infantil 3 </div>"},}); </scrito>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>Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Para obtener tutoriales en los componentes Vue.js, haga clic en el tema especial Vue.js Component Learning Tutorial para aprender.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.