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
Componentes - itens diversos são detalhados da seguinte forma:
① Componentes e V-for
Simplificando, os componentes são reutilizados várias vezes;
Por exemplo, uma determinada linha na tabela ou a vitrine da janela do produto de comércio eletrônico (janela única) pode se tornar componentes que podem ser reutilizados;
Basta escrever um deles como um componente e, em seguida, fazer da fonte de dados uma matriz (ou objeto, mas eu pessoalmente acho que é uma matriz). Através da Traversal V-For, cada instância do componente pode obter uma das matrizes, gerando todos os componentes.
Devido à multiplexação, os adereços precisam ser usados para vincular o resultado da travessia I e os dados vinculados a adereços. O método de ligação é o mesmo que a forma comum e está ligado no modelo.
Código de exemplo:
<div id = "App"> <botão @click = "TOKnowChildren"> Clique para deixar o componente filho exibir </butut> <table> <tr> <td> índice </td> <td> id </td> <td> descrição </td> </tr> <tr = "the tr-para" i em itens "V-bind: id: idi:" V-bind "</td> </tr> <tr>" tats "vf =" i em itens "v-bind: id:" INDENCEN: " <SCRIPT> var VM = new Vue ({el: '#app', dados: {itens: [1, 2, 3, 4]}, métodos: {toknowChildren: function () {// componente de componente console.Log.Log (this. "<td> {{index}} </td>" + "<td> {{id}} </td>" + "<td> Este é o componente filho </td>" + "</tr>", props: ['id', 'index']}}}); </script>ilustrar:
【1】 Lembre -se de colocar os dados a serem passados em adereços!
【2】 Índice de ligação e índice $ índice, porque o índice começa em 0, portanto a coluna onde o índice está localizado começa em 0; O ID está ligado a I que atravessa itens, então o ID começa em 1.
[3] Você pode obter componentes filhos com isso.
② Escreva componentes reutilizáveis:
Simplificando, é possível que um componente de uso único (usado apenas aqui, não reutilizado) esteja fortemente acoplado a outros componentes, mas um componente reutilizável deve definir uma interface pública clara. (Caso contrário, como os outros o usam?)
Os componentes reutilizáveis precisam basicamente interagir com o exterior, e um componente e a interface interativa divulgada externamente incluem:
【1】 adereços: permita que os dados do ambiente externo sejam passados para componentes;
【2】 Evento: permita que o componente acione a ação do ambiente externo, ou seja, adicionando uma diretiva V-One no ponto de montagem, os métodos do componente pai são acionados ao mesmo tempo em que os eventos do componente filho são acionados;
[3] Slot: Distribuição, permitindo que o conteúdo do componente pai seja inserido na estrutura de visualização do componente filho.
Como código:
<div id = "App"> <p> Este é o primeiro componente pai </p> <widget: the-value = "teste" @algum = "TODO"> <pan> 【o conteúdo do primeiro componente pai inserido】 </span> </-widget> </div> <div = "App2"> <p> isto é o segundo componente </p. <Script> vue.component ("widget", {modelo: "<botão @click = 'Dosomething'> <slot> </slot> Este é um componente reutilizado, clique nele {{theValue}}} </button>", métodos: {Dosoming: function () {this. console.log ("Widget Click"); var vm_other = new vue ({el: '#app2', dados: {name: "primeiro"}, métodos: {TODO: function () {console.log ("Este é outro componente pai")}}}}); </script>ilustrar:
[1] O slot de distribuição é usado no primeiro componente pai e os adereços são usados para passar o valor (passe o valor do teste para o valor do componente filho);
[2] Entre os dois componentes, depois de clicar no componente filho, o método do Dosomething nos métodos e, em seguida, alguns eventos nos eventos são executados. Em seguida, através do ponto de montagem @algum = "TODO" para vincular algum evento do componente filho e o método TODO do componente pai.
Portanto, depois de clicar no componente filho, o método TODO do componente pai será executado.
[3] Alterar o valor passado para o componente filho no componente pai alterará de forma síncrona o valor do componente filho (ou seja, ambos estarão ligados a dados);
Components Componentes do Sync:
De acordo com o meu entendimento, basta colocar, um grande aplicativo possui vários componentes, mas alguns componentes não precisam ser carregados imediatamente, para que sejam divididos em vários componentes (por exemplo, aqueles que precisam ser carregados imediatamente, mas não imediatamente);
Se precisar ser carregado imediatamente, é obviamente melhor colocá -lo no mesmo arquivo (ou solicitado juntos no mesmo lote);
Se não precisar ser carregado imediatamente, poderá ser colocado em outros arquivos, mas, quando necessário, o Ajax o solicitará ao servidor;
Os seguintes solicitações são componentes assíncronos;
A função do vue.js é a função do vue.js, que permite que o componente seja definido como uma função de fábrica e analisa dinamicamente a definição do componente.
Pode ser usado com Webpack.
Quanto a como usá -lo em detalhes, eu não entendo muito bem. Não posso escrevê -lo claramente no tutorial, então vou deixá -lo de lado e esperar para estudá -lo quando necessário.
Link:
http://cn.vuejs.org/guide/components.html#u5f02_u6b65_u7ec4_u4ef6
④Resource Naming Conventions:
Simplificando, as tags HTML (como Div e Div são as mesmas) e os recursos (como escrever instruções como V-ON em vez de Von) são insensíveis a minúsculas.
Os nomes de recursos são frequentemente escritos em camelos (como camelcase camel) ou na forma de letras maiúsculas da primeira letra da palavra (como PascalCase, não sei como chamar isso, mas raramente escrevo isso).
Vue.component ("myTemplate", {// ...... omitido})O vue.js pode reconhecê -lo automaticamente e convertê -lo.
<MyM-Template> </my-template>
O modelo acima pode substituir automaticamente esta tag.
Components Recursive Components:
Simplificando, um componente recursivo é um componente que incorpora seu próprio modelo em si.
Se um componente quiser voltar, ele precisará do atributo de nome e o Vue.Componente vem com seu próprio atributo de nome.
Provavelmente isso se parece com isso,
<div id = "App"> <My-template> </my-template> </div> <cript> vue.component ("myTemplate", {modelo: "<p> <my-template> </my-template> </p>"})Esta é uma recursão infinita, o que definitivamente não é possível. Portanto, é necessário controlar o número de camadas de sua recursão, por exemplo, controlar a recursão através dos dados e interromper a recursão quando os dados estão vazios.
O código de amostra é o seguinte:
<ul id = "App"> <li> {{b}} </li> <my-template v-if = "a": a = "aa": b = "ab"> </my-template> </ul> <liem-mplyt> vue.component ("mytemplate", {{model: '<ul> <li> {{b} {b} {b}} {b} {}} {} {b} {b}} {} {b}} {b}} {b} {} {} {} {} {} {}} {b} {b}} {b} {b}} {b}} {b} {b} {mysplate "{' <ul> <li> {b} {mytemplate", {') :a="aa" :b="ab"></my-template></ul>', props: ["a", "b"] }) var data = { a: { a: { a: { a: 0, b: 3 }, b: 2 }, b: 1 } var vm = new Vue({ el: '#app', data: data, methods: { todo: function () { this.test += "!"; </script>ilustrar:
[1] Ao passar, o valor de A e o valor de B são passados através de adereços, onde o valor de A é usado como fonte de dados para os valores de A e B do componente após a recursividade;
Em seguida, determine se o valor de um passado para o componente recursivo existe e, em caso afirmativo, continue a recorrer;
Se o valor de A não existir, a recursão será interrompida.
⑥ Exemplo de Fragamento:
Simplificando, a chamada instância de fragmento significa que o modelo do componente não está sob um nó raiz:
Código da instância do fragmento:
Vue.component ("myTemplate", {modelo: '<div> 1 </div>' + '<div> 2 </div>',})Instância não de fragmentação:
Vue.component ("myTemplate", {modelo: '<div>' + '<div> 1 </div>' + '<div> 2 </div>' + '</div>',})As seguintes características das instâncias de fragmento são ignoradas:
[1] Instruções de controle não processadas sobre elementos de componentes (como instruções de vôo V escritas no ponto de montagem e controladas pelo componente pai, mas observe que o V-IF pertence a instruções de controle de processo);
【2】 Recurso não-fornecedores (observe que os adereços não serão ignorados, além disso, os adereços são gravados no ponto de montagem);
[3] transição (ou seja, o atributo de transição será ignorado);
Para obter mais referência à documentação oficial:
http://cn.vuejs.org/guide/components.html#u7247_u65ad_u5b9e_u4f8b
⑦inline Modelo
Referência: http://cn.vuejs.org/guide/components.html#u5185_u8054_u6a21_u677f
O exposto acima é o componente do capítulo 13 de Vuejs que o editor apresentou a você - itens diversos. 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!