Este artigo é um tutorial mais detalhado e abrangente compilado pelo editor em combinação com documentos oficiais. É muito bom e é mais adequado para os iniciantes lerem.
Este artigo vem do documento oficial:
http://cn.vuejs.org/guide/components.html#u7236_u5b50_u7ec4_u4ef6_u901a_u4fe1
Comunicação do componente pai-filho
① Acesse componentes filhos, componentes pais e componentes raiz;
isto. $ componente de acesso pai Acesso
isto. $ crianças acessam componentes filhos (é uma matriz)
Isto. $ Raiz o descendente da instância raiz acessa a instância raiz
Código de exemplo:
<div id = "App"> Componente pai: <input v-model = "val"> <br/> componente filho: <test: test = "val"> </stest> </div> <cript> var VM = new Vue ( @{el: '#app', dados: {val: 1}, componentes: {{{Props: [{' v-model = 'teste'/> ", métodos: {findParent: function () {console.log (this. $ pai); // Acesse o componente raiz console.log (this. // Verifique se o componente pai e o componente raiz são congruentes (porque seu componente pai é o componente raiz)}}}}}}); </script>Quando as chaves aparecem na caixa de entrada do subcomponente, o conteúdo exibido é:
O valor da caixa de entrada do componente pai e do componente pai (o padrão é 1), 0 (representa que é o primeiro elemento no atributo filho do componente pai) e true (porque o componente pai é o componente raiz, é felicidade);
Dessa maneira, a interação pode ser realizada na árvore de componentes.
② Eventos Custom:
Primeiro de tudo, os eventos precisam ser colocados na propriedade dos eventos, e não na propriedade Methods (um erro que os iniciantes provavelmente cometem). Eles só podem desencadear eventos na propriedade Events, enquanto os eventos na propriedade Methods não podem ser acionados.
Em segundo lugar, há uma diferença entre a distribuição ascendente e a transmissão descendente: a distribuição ascendente desencadeará um evento com o mesmo nome, enquanto a transmissão para baixo não o fará;
Terceiro, a distribuição ascendente e a transmissão descendente acionarão apenas eventos para linhas diretas (crianças ou pais, excluindo ancestrais e netos) por padrão, e continuarão nessa linha, a menos que o valor de retorno do evento seja verdadeiro.
Quarto, o evento não pode ser chamado explicitamente através disso. Nome do evento.
Código de exemplo:
<div id = "App"> Componente pai: <botão @click = "ParentClick"> Clique para propagar transmissão para baixo {ParentClick: function () {this. Nenhum valor de retorno e não continuará sendo distribuído adereços: ['teste'], modelo: "<butão> crianças1 </botão> </br> Subcomponente 2: <frids2> </fils2>", eventos: {Childrenclick: function () {console.log ("functrenclick-children1"); Console.Log (ParentClick-children1 "); {Childrenclick: function () {Console.log ("Childrenclick-Children2"); Ele continuará distribuindo adereços para os componentes filhos do componente filho: ['Teste'], modelo: "<butão> Outro Children1 </botão> </br> Outro componente infantil 2: <osther-children2> </ther-children2>", os eventos: {childrenclick: function () {console.log (" (msg) {console.log (ParentClick-anotherchildren1 "); this. } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}ilustrar:
【1】 Clique no botão do componente pai e será transmitido para baixo e acionará o próprio componente filho 1, outro componente filho 1 e outro componente filho 2;
【2】 Clicar no botão do componente filho 2 acionará o evento do componente filho 2 e o evento do componente filho 1, mas não acionará o botão do componente pai;
【3】 Clicar no botão de outro componente filho 2 acionará o evento de outro componente filho 2, o evento de outro componente filho 1 e o evento do componente pai (porque o valor de retorno do evento de outro componente filho 1 é verdadeiro);
③ Use o V-ON para vincular eventos personalizados:
[1] Simplificando, quando um componente filho aciona um evento (o método em eventos), o componente pai também executa um método (o método nos métodos do componente pai).
[2] A ligação desencadeada é gravada no modelo (ou seja, o modelo de modelo que é substituído). Vários componentes filhos podem vincular um método de componente pai ou diferentes componentes filhos podem vincular um método de componente pai diferente, mas o mesmo evento de componente filho não pode vincular um método.
【3】 O componente filho envia parâmetros para passagem de mensagens. Mesmo que o evento do componente filho não tenha parâmetros, ele não afeta o método de passar os parâmetros para o componente pai (ou seja, o método do componente pai pode aceitar parâmetros obtidos pelo método do componente filho)
Como exemplo:
<div id = "App"> Componente pai: <botão> Clique para propagar a transmissão </botão> <br/> Componente filho 1: <!-A ligação está escrita aqui. Múltiplas ligações podem ser ligadas ao mesmo, ou diferentes ligações são diferentes, mas o múltiplo não pode ser vinculado a um-> <crianças V-on: test = "Parent" @test2 = "outro"> </children> </div> <cript> var vm = new ({el: '#app', dados: {{Val: 1}, métodos: {parent: funct) {el: '#app', data: {{1},. Event ");}, outro: function () {console.log (" Outro método ");}}, componentes: {crianças: {// Isso não tem valor de retorno e não continuará sendo distribuído. ChildClick: function () {this. $ emit ("teste", 'o argumento para despacho'); }); </script>④ Índice de subcomponente
Simplificando: você pode obter diretamente subcomponentes do índice e, em seguida, pode chamar os métodos de cada subcomponente.
O método para adicionar índice é: Adicione V-Ref à tag: Nome do índice
O método de chamar o componente é: vm. $ Ref. Nome do índice
Você também pode usar isso. $ Ref. Nome do índice diretamente no componente pai
No momento, você pode obter o componente e, em seguida, o componente pode chamar seus métodos ou usar seus dados.
Código de exemplo:
<div id = "App"> Componente pai: <botão @click = "TODO"> Eventos acionando o componente filho </botão> <br/> Subcomponente 1: <!-A ligação está escrita aqui. Várias ligações podem ser ligadas à mesma, ou ligações diferentes são diferentes, mas o múltiplo não pode ser vinculado a um-> <crianças V-ref: Child> </children> </div> <cript> var VM = new Vue ({el: '#app', métodos: {TODO: function () »isto. Crianças: {// Isso não tem valor de retorno e não continuará distribuindo adereços: ['teste'], modelo: "<butter> Children1 </botão>", Métodos: {FromParent: function () {Console.log ("Wappned fromparent by Ref"); </script>O exposto acima é o artigo 10º Vuejs 10th Vuejs Componente Pai-Child Component Introduzido a você. 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!