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.
Conteúdo de distribuição de slot
① Visão geral:
Simplificando, se o componente pai precisar colocar alguns DOMs no componente filho, esses DOMs serão exibidos, não exibidos, onde são exibidos e como são exibidos, que é a responsabilidade da distribuição de slots.
② Por padrão
O conteúdo do componente pai que está incluído dentro do componente filho não é exibido.
Por exemplo, código:
<div id = "App"> <fresh> <pan> 12345 </span> <!-A linha acima não será exibida-> </fils> </div> <cript> var VM = new Vue ({el: '#App', componentes: {crianças: {// não tem valor de retorno e o modelo }}}); </script>O conteúdo de exibição é um botão, que não contém o conteúdo na tag Span;
Slot slot
Simplificando, se você usar apenas esta tag, você poderá colocar o componente pai no conteúdo do componente filho e colocar que ele deseja que ela seja exibida.
<div id = "App"> <fresd> <pan> 12345 </span> <!-A linha acima não será exibida-> </fils> </div> <cript> var vm = new Vue ({el: '#App', componentes: {crianças: {// não tem valor de retorno, e o modelo não será distribuído: " Ação, use a tag de botão </botão> "}}}); </script>Por exemplo, se você escrever isso, o resultado é:
<butão> <pan> 12345 </span> Para esclarecer o escopo da ação, use a tag de botão </butão>
Ou seja, o conteúdo do componente pai colocado no componente filho é inserido na posição </lot> </lot> do componente filho;
Observe que, mesmo que existam várias tags, elas serão inseridas juntas, o que equivale a substituir a tag <Slot> </lot> pela tag colocada no componente filho.
④ Slot chamado
Coloque diferentes tags HTML colocadas em subcomponentes em diferentes locais
O componente pai adiciona o atributo slot = "name" à tag a ser distribuída
O componente filho adiciona o atributo Nome = "Nome Name" na tag slot do local de distribuição correspondente e, em seguida, coloca a tag correspondente no local correspondente.
Código de exemplo:
<div id="app"> <children> <span slot="first">12345</span> <span slot="second">56789</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //This has no return value, and the template will not continue to be Distribuído: "<butão> <slot name = 'primeiro'> </slot> Para esclarecer o escopo da ação, <slot name = 'segundo'> </slot> Então use a tag de botão </button>"}}}); </script>O resultado é exibido como: (Para a conveniência da visualização, a quebra da linha foi ajustada manualmente)
<butão> <span slot = "primeiro"> 12345 </span> Para esclarecer o escopo da ação, <span slot = "segundo"> 56789 </span> Então use a tag de botão </butut>
⑤Scope of Distribution Content:
O escopo do conteúdo distribuído é determinado com base no modelo onde está localizado. Por exemplo, a tag acima é controlada pelo modelo do componente pai (embora seja incluído pelo componente filho do filho, mas como não está no atributo de modelo do componente filho, não pertence ao componente filho), é controlado pelo componente pai.
Código de exemplo:
<div id="app"> <children> <span slot="first" @click="tobeknow">12345</span> <span slot="second">56789</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', methods: { tobeknow: function () { Console.log ("É o método dos pais"); </script>Quando a área do texto 12345 é clicada (em vez de botões todos), o método Tobeknow do componente pai é acionado.
Mas ao clicar em outras áreas, não há efeito.
O tutorial oficial diz o seguinte:
O conteúdo do modelo de componente pai é compilado dentro do escopo do componente pai; O conteúdo do modelo de componente filho é compilado dentro do escopo do componente filho
⑥ Dicas quando não há conteúdo distribuído:
Se o componente pai não colocar uma tag no componente filho ou o componente pai coloca uma tag no componente filho, mas possui um atributo de slot, e o componente filho não possui uma tag para o atributo slot.
Em seguida, a tag slot do componente filho não desempenhará nenhum papel.
A menos que haja conteúdo na tag slot, o conteúdo na tag slot será exibido quando não houver conteúdo distribuído.
Como no código de exemplo:
<div id = "App"> <Children> <span slot = "primeiro"> 【12345】 </span> <!-A linha acima não será exibida-> </filDes> </div> <cript> var VM = new Vue ({el: '#App', componentes: {{{// Isso não tem retorno e não resgate> Nome = 'First'> <butto> 【Se não houver conteúdo, ele me mostrará 1】 </botão> </slot> para esclarecer o escopo da ação, <slot name = 'last'> <butter> 【Se não houver conteúdo, ele me mostrará 2】 </tobleto> <//slot> Então use a tag de botão </div> "}}} </script>ilustrar:
【1】 A tag slot com nome = 'Primeiro' é substituída pela tag correspondente ao componente pai (o conteúdo dentro da tag slot é descartado);
【2】 A tag de slot do nome = 'Última', porque não há conteúdo correspondente, o conteúdo dentro da tag slot será exibido.
⑦ Se você deseja controlar as propriedades da etiqueta raiz do subcomponente
[1] Primeiro de tudo, como a tag de modelo pertence ao componente pai, não é possível vincular as instruções do componente filho à tag de modelo (porque pertence ao componente pai);
[2] Se você precisar controlar se o componente filho é exibido (como V-IF ou V-Show) através do componente pai, essa diretiva obviamente pertence ao componente pai (como colocado nos dados do componente pai). As tags podem ser gravadas no modelo do componente filho.
Como código:
<div id = "App"> <botão @click = "TOSHOW"> Clique para deixar o componente filho exibir </botão> <crianças v-if = "abc"> </filds> </div> <crript> var vm = new vue ({el: '#app', dados: {abc: false}, this: {tosHow: function: {#App ', data: {ABC: false}, this: {{TosHow:; Filhos: {// Isso não tem valor de retorno, modelo: "<div> Este é um componente filho </div>"}}}); </script>ilustrar:
Controle se o componente filho é exibido através do componente pai (clique no botão para alternar o valor da instrução V-IF).
[3] Se você precisar controlar se o componente filho é exibido (por exemplo, deixe ocultar), essa instrução obviamente pertence ao componente filho (o valor será colocado sob o atributo de dados do componente filho), ele não pode ser escrito acima, mas deve ser colocado no rótulo raiz do componente filho.
<div id="app"> <button @click="toshow">Click to let the child component display</button> <children> <span slot="first">【12345】</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', methods: { toshow: function () { isto. $ crianças [0] .tohidden = true; this.tohidden =! this.tohidden; </script>ilustrar:
Clicar em um componente filho fará com que o componente filho desapareça;
Clique no botão do componente pai para redisplay o componente filho alterando a propriedade ToHidden do componente filho.
As instruções do componente filho estão vinculadas ao modelo do componente filho (isso pode ser chamado);
O acima é uma explicação detalhada do exemplo de distribuição de conteúdo de slot do 11º componente VueJS introduzido pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!