O que são componentes?
O componente é um dos recursos mais poderosos do vue.js. Os componentes podem estender os elementos HTML e encapsular o código reutilizável. Em um nível superior, os componentes são elementos personalizados, e o compilador do Vue.js adiciona recursos especiais a ele. Em alguns casos, os componentes também podem estar na forma de elementos HTML nativos, estendidos com o recurso IS.
Este artigo é uma explicação mais detalhada compilada pelo editor com base nos documentos oficiais. O código é mais completo e perfeito, o que é muito adequado para os iniciantes aprenderem.
Documentação Oficial:
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
Os componentes dinâmicos são descritos abaixo:
①Simple:
Isso significa que vários componentes são colocados sob um ponto de montagem e, em seguida, eles decidem qual exibir com base em uma variável do componente pai ou nenhum deles é exibido.
② Switch dinâmico:
Use a tag de componente no ponto de montagem e, em seguida, use v-bind: is = "nome do componente" para encontrar automaticamente o nome do componente correspondente. Caso contrário, não será exibido;
Para alterar o componente montado, você só precisa modificar o valor da diretiva IS.
Como no código de exemplo:
<div id = "App"> <botão @click = "TOSHOW"> Clique para deixar o componente filho exibir </botão> <componente v-bind: is = "que_to_show"> </componente> </div> <cript> var VM = new Vue ({el: '#App', Data: {qual_To_Show: "Firm =}:} ({el: '#app', dados: {{qual_to_show:" First =}:} ({el: '#app', data: {{qual_to_show: "Firm =}:}} ({el: '#app', data: {qual_to_show:" Firm =}}: = [Primeiro "," Segunda "," Terceiro "," Componente 1 </div> "}, segundo: {// O segundo modelo de componente filho:" <div> Aqui está o componente filho 2 </div> "}, terceiro: {// O terceiro modelo de componente filho:" <div> aqui é o componente filho 3 </div> "},}}); </script>ilustrar:
Clicar no botão do componente pai alternará automaticamente para exibir um componente filho (determinado com base no valor da variável que_to_show).
③ Keep-alive
Simplificando, o componente que foi alterado (não exibido no momento) é removido diretamente.
Olhando para isso. $ Children atribui no componente pai, você pode descobrir que quando o componente filho existe, o comprimento do atributo é 1 e quando o componente filho não existe, o comprimento do atributo é 0 (o componente filho não pode ser obtido);
Se o componente filho precisar ser alterado, ainda é necessário mantê-lo em memória para evitar a renderização quando aparecer na próxima vez. Em seguida, você deve adicionar o atributo Keep-Alive à tag do componente.
Como código:
<div id = "App"> <botão @click = "TOSHOW"> Clique para deixar o componente filho exibir </botão> <componente v-bind: is = "que_to_show" Keep-alive> </componente> </div> <cript> var VM = novo ({el: '#App, data: {{_to_show Exibição do componente var = [primeiro "," Segunda "," terceiro ""]; //The first child component template: "<div>Here is child component 1</div>" }, second: { //The second child component template: "<div>Here is child component 2</div>" }, third: { //The third child component template: "<div>Here is child component 3</div>" }, } }); </script>ilustrar:
No caso inicial, existe apenas um elemento (primeiro componente) no atributo da VM. $ Children. Depois de clicar no botão para alternar, existem dois elementos no atributo da VM. $ Crianças. Depois de alternar novamente, existem três elementos (os três subcomponentes são retidos na memória).
Depois disso, não importa como você troca, haverá três elementos.
④ Ative o gancho
Simplificando, é um carregamento preguiçoso.
Por exemplo, ao iniciar uma solicitação de Ajax, precisamos esperar algum tempo. Se precisarmos carregar a solicitação do AJAX após a conclusão, precisamos usar o gancho Activate.
Em termos de uso específico, o Activate é um atributo no mesmo nível que os atributos, como modelo e dados. O formulário é uma função. Existe um parâmetro na função por padrão. Este parâmetro é uma função. O componente será alterado apenas quando essa função for executada.
Para provar seu atraso no carregamento, no lado do servidor, defina que, quando uma determinada solicitação do AJAX for iniciada, ela atrasará 2 segundos antes de retornar o conteúdo. Portanto, ao alternar o componente 2 pela primeira vez, você precisa esperar 2 segundos antes de alternar com sucesso:
<div id = "App"> <botão @click = "TOSHOW"> Clique para deixar o componente filho exibir </botão> <componente v-bind: is = "que_to_show"> </componente> </div> <cript> var VM = new Vue ({el: '#App', Data: {qual_To_Show: "Firm =}:} ({el: '#app', dados: {{qual_to_show:" First =}:} ({el: '#app', data: {{qual_to_show: "Firm =}:}} ({el: '#app', data: {qual_to_show:" Firm =}}: = [Primeiro "," Terceiro "," component template: "<div>Here is child component 1</div>" }, second: { //The second child component template: "<div>Here is child component 2, here is the content after ajax: {{hello}}</div>", data: function () { return { hello: "" } }, activate: function (done) { //The component var self = this when executing this parameter will be Switched. 3 </div> "}}}); </script>Efeito de código:
【1】 Ao mudar para o componente 2 pela primeira vez, você precisa esperar 2 segundos antes de exibir (porque o AJAX é iniciado);
[2] No caso de Keep-Alive, ao mudar para o componente 2 no segundo ou posterior, não há necessidade de esperar; Mas o conteúdo do Ajax precisa ser exibido dois segundos após a primeira vez que o Ajax é iniciado;
【3】 Sem Keep-Alive (não é salvo na memória após a troca), você ainda precisa esperar ao alternar para o componente 2 na segunda vez.
[4] Ao esperar, isso não afeta a comutação novamente (ou seja, ao aguardar o componente 2, clique para alternar novamente para alternar diretamente para o componente 3);
ilustrar:
【1】 A ativação será executada somente quando o componente for renderizado pela primeira vez, e a função será executada apenas uma vez (o componente aparece atrasado quando o componente aparecer)
【2】 Quando não houver manutenção, toda vez que o componente do Switch aparecer, ele será renderizado novamente (porque o processo de destruição foi executado quando oculto antes), para que o método Activate seja executado.
⑤ Modo de transição no modo de transição
Simplificando, deixe o componente dinâmico mudar para animação. (Lembre -se das instruções na seção de transição, as transições são adequadas para componentes dinâmicos)
Por padrão, a entrada e a saída são concluídas juntas; (O conteúdo que entra pode aparecer abaixo do conteúdo de saída, que se refere ao lado inferior do eixo y. Depois de sair, a entrada aparecerá na posição correta);
Quando o modo de transição = "Out-in", a animação é sair primeiro e depois entrar;
Quando o modo de transição = ”in-Out”, a animação é a primeira e posteriormente (o mesmo que os problemas que tendem a ocorrer no padrão);
Código de exemplo: (usando o nome de transição personalizado e o arquivo Animate.css)
<div id = "App"> <button @click = "TOSHOW"> Clique para deixar o componente filho exibir </botão> <componente v-bind: is = "que_to_show" transition = "bounce" transition-mode = "out-in"> </componente> </div> <cript> vueRansição ("Bounce", {entercl. }) var VM = new Vue ({el: '#app', dados: {what_to_show: "First"}, métodos: {tosHow: function () {// componente de alternância Var Arr = ["primeiro", "segundo", "terceiro", "]; + 1]; Dados: function () {return {hello: ""}}}, terceiro: {// O terceiro modelo de componente filho: "<div> Aqui está o componente filho 3 </div>"}}}}); </script>O acima é o componente dinâmico do 12º capítulo do Vuejs introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!