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.
Componentes de uso
registrar
Como mencionado anteriormente, podemos criar um construtor de componentes usando vue.extend ():
var myComponent = vue.extend ({// options ...})Para usar esse construtor como componente, você precisa se registrar com `vue.component (tag, construtor)` **:
// Registro globalmente o componente, a tag é my-componentVue.component ('my-component', mycomponent)<p> Vue.js não exige a regra W3C (minúsculas e inclui uma barra curta) para nomes de tags personalizados, embora seja melhor seguir esta regra.
Depois que o componente é registrado, ele pode ser usado como um elemento personalizado <My-Component> no módulo da instância pai. Para garantir que o componente seja registrado antes de inicializar a instância raiz:
<div id = "Exemplo"> <My-Component> </my-component> </div> // define var myComponent = vue.extend ({modelo: '<div> um componente personalizado!Renderizado como:
<div id = "exemplo"> <div> Um componente personalizado! </div> </div>
Observe que o modelo do componente substitui o elemento personalizado e a função do elemento personalizada é apenas como um ponto de montagem. Você pode usar a opção de instância substituída para decidir se deve substituí -la.
Registro local
Não há necessidade de registrar cada componente globalmente. Ele só pode ser usado em outros componentes, registre -se com os componentes da opção de instância:
var filho = vue.extend ({ / * ... * /}) var pai = vue.extend ({modelo: '...', componentes: {// <mycomponent> só pode ser usado no modelo de componente pai 'my-component': filho}})Esse encapsulamento também é adequado para outros recursos, como instruções, filtros e transições.
Registrar açúcar sintático
Para simplificar o evento, você pode passar o objeto de opção diretamente, em vez do construtor para as opções vue.component () e componentes. Vue.js chama automaticamente o vue.extend () atrás das costas:
// estende e registre vue.component ('my-component', {modelo: '<div> um componente personalizado!Problemas de opções de componentes
A maioria das opções passadas para o construtor Vue também pode ser usada no vue.extend (), mas existem dois casos especiais: dados e el. Imagine se simplesmente passarmos um objeto como uma opção de dados para vue.extend ():
var dados = {a: 1} var myComponent = vue.extend ({data: data})O problema é que todas as instâncias do MyComponent compartilharão o mesmo objeto `dados`! Isso basicamente não é o que queremos, então devemos usar uma função como a opção `dados` para retornar um novo objeto:
var myComponent = vue.extend ({data: function () {return {a: 1}}})Da mesma forma, a opção `el` também deve ser uma função quando usada em` vue.extend () `.
Análise de modelos
O modelo de Vue é um modelo DOM, que usa um analisador nativo do navegador em vez de implementar um por si só. Comparados aos modelos de string, os modelos DOM têm alguns benefícios, mas existem problemas e deve ser um trecho HTML válido. Alguns elementos HTML têm limitações sobre quais elementos podem ser colocados dentro dele. Limitações comuns:
• A não pode conter outros elementos interativos (como botões, links)
• UL e OL só podem incluir diretamente LI
• Selecionar pode incluir apenas a opção e OptGroup
• A tabela pode incluir diretamente diretamente a cabeça, TBody, TFOT, TR, Legenda, Col, Colgroup
• TR só pode incluir TH e TD diretamente
Na prática, essas limitações podem levar a resultados inesperados. Embora possa funcionar em casos simples, você não pode confiar em componentes personalizados para expandir os resultados antes da validação do navegador. Por exemplo, <my-select> <pution> ... </option> </yy-select> não é um modelo válido, mesmo que o componente My-Select acabe se expandindo para <select> ... </select>.
Outro resultado é que as tags personalizadas (incluindo elementos personalizados e tags especiais, como <componente>, <modemplate>, <starcial>) não podem ser usados em tags que tenham restrições aos elementos internos, como UL, selecione, tabela, etc. Tags personalizadas colocadas dentro desses elementos serão mencionadas fora do elemento, tornando -se assim incorretamente.
Para elementos personalizados, o atributo IS deve ser usado:
<tabela> <tr is = "my-component"> </tr> </ table>
`` não pode ser usado em ``, `` neste momento, ``
Pode haver vários ``:
<tabela> <tbody v-for = "Item em itens"> <tr> até linha </tr> <tr> ímpar linha </tr> </tbody> </tabela>
Adereços
Passando dados usando adereços
O escopo das instâncias dos componentes é órfão. Isso significa que os dados do componente pai não podem e não devem ser referenciados diretamente no modelo do componente filho. Você pode usar adereços para passar dados para componentes filhos.
"Prop" é um campo de dados de componentes que deve ser passado do componente pai. Os componentes da criança precisam declarar explicitamente adereços com a opção de adereços:
Vue.component ('Child', {// Declare props props: ['msg'], // prop pode ser usado em modelos // você pode usar `this.msg` para definir o modelo: '<pan> {{msg}} </span>'})Em seguida, passe uma string normal:
<Child msg = "Hello!"> </fid>
Barra de corcunda vs.
Os atributos HTML são insensíveis a minúsculas. Quando um suporte com o nome de camelcase é usado como um recurso, ele precisa ser convertido em casos de kebab (linhas horizontais curtas separadas):
Vue.component ('Child', {// CamelCase in JavaScript Props: ['myMessage'], modelo: '<pan> {{myMessage}} </span>'}) <!-kebab-case in html-> <criança my-message = "hello!"> </FilhoAdereços dinâmicos
Semelhante ao uso de V-Bind para ligar os atributos HTML a uma expressão, você também pode usar o V-Bind para ligar adereços dinâmicos aos dados do componente pai. Sempre que os dados do componente pai mudam, eles também são transmitidos ao componente filho:
<div> <input v-model = "parardmsg"> <br> <criança v-bind: my-message = "parardmsg"> </fid> </div>
O uso da sintaxe da abreviação de `v-bind` é geralmente mais simples:
<Child: my-message = "paradermsg"> </fid>
Sintaxe literal vs. sintaxe dinâmica
Um erro comum para iniciantes é passar valores numéricos usando sintaxe literal:
<!-Passou uma string "1"->
<comp algum-prop = "1"> </pp>
Por ser um suporte literal, seu valor é passado na string `" 1 "` em vez do número real. Se você deseja passar por um número JavaScript real, precisará usar sintaxe dinâmica para que seu valor seja calculado como uma expressão de JavaScript:
<!-Passe o número real->
<Comp: algum-prop = "1"> </parp>
Tipo de ligação a prop
O Prop é a ligação unidirecional por padrão: quando as propriedades da mudança do componente pai, ela será passada para o componente filho, mas o contrário não o fará. Isso é para impedir que o componente filho modifique acidentalmente o estado do componente pai - isso dificulta o fluxo de dados do aplicativo. No entanto, também é possível forçar explicitamente a ligação bidirecional ou de um único tempo usando o modificador de ligação .sync ou .once:
Sintaxe comparativa:
<!-O padrão é uma ligação unidirecional-> <filho: msg = "parardmsg"> </fid> <!-ligação bidirecional-> <filho: msg.sync = "parardmsg"> </fid> <!-encadernação-> <filho: msg.once = "parabelsg"> </child> <!
A ligação bidirecional sincroniza o atributo msg do componente filho de volta ao atributo parentMSG do componente pai. A ligação única não sincronizará as alterações após a criação.
Observe que se o prop for um objeto ou matriz, ele será passado por referência. Modificar -o dentro de um componente filho afetará o estado do componente pai, independentemente do tipo de ligação usado.
Verificação de suporte
Os componentes podem especificar requisitos de verificação para adereços. Isso é útil quando os componentes são dados a outros, porque esses requisitos de verificação formam a API do componente, garantindo que outros usem o componente corretamente. No momento, o valor dos adereços é um objeto que contém requisitos de verificação:
Vue.component('example', { props: { // Basic type detection (`null` means any type is OK) propA: Number, // Multiple types (1.0.21+) propM: [String, Number], // Required and string propB: { type: String, required: true }, // Number, with default values propC: { type: Number, default: 100 }, // The default value of an object/array should ser retornado por uma função para propd: {type: objeto, padrão: function () {return {msg: 'hello'}}}, // Especifique este suporte como uma ligação bidirecional // se o tipo de ligação {não estiver correto, um aviso/ valor/ valor {{{twoway: function:}, // de retificação personalizada. Value (novo em 1.0.12) // converte o valor antes de definir o valor Propg: {coerce: function (val) {return val + '' // converte o valor em uma string}}, proph: {coerce: function (val) {return json.parse (val) // converte a string json para um objeto}}}}}O tipo pode ser o seguinte construtor nativo:
•Corda
•Número
• Booleano
•Função
•Objeto
•Variedade
O tipo também pode ser um construtor personalizado que usa a instância da detecção.
Quando a verificação do suporte falha, o Vue se recusa a definir esse valor no componente filho e um aviso será lançado se a versão de desenvolvimento for usada.
Comunicação do componente pai-filho
Link pai
Um componente filho pode acessar seu componente pai com isso. $ Parent. Os descendentes da instância raiz podem acessá -la com isso. $ Raiz. O componente pai tem uma matriz. $ Crianças que contêm todos os seus elementos filhos.
Embora qualquer instância da cadeia pai possa ser acessada, os componentes filhos devem evitar confiar diretamente nos dados do componente pai e tentar usar adereços para passar dados explicitamente. Além disso, é muito ruim modificar o estado do componente pai em um componente filho porque:
1. Isso permite que o componente pai esteja intimamente acoplado ao componente filho;
2. Se você olhar apenas para o componente pai, é difícil entender o estado do componente pai. Porque pode ser modificado por qualquer componente filho! Idealmente, apenas o componente pode modificar seu próprio estado.
Eventos personalizados
A instância do Vue implementa uma interface de evento personalizada para comunicação na árvore de componentes. Este sistema de eventos é independente dos eventos nativos do DOM e o usa de maneira diferente.
Cada instância do VUE é um gatilho de evento:
• Use $ on () para ouvir eventos;
• Use $ emit () para acionar um evento nele;
• Use $ despacho () para distribuir eventos e os eventos borbulham ao longo da cadeia pai;
• Use $ transmitido () para transmitir eventos e os eventos são transmitidos para baixo para todos os descendentes.
Ao contrário do evento DOM, o evento Vue interrompe automaticamente a bolha depois que o primeiro retorno de chamada é acionado durante o processo de bolha, a menos que o retorno de chamada retorne explicitamente true.
Exemplo simples:
<!-modelo de componente filho-> <modelo id = "child-template"> <input v-model = "msg"> <botão v-on: click = "notify"> despacho event </botão> </modemplate> <!-modelo de componente pai-> <div id = "events-exple"> <p> mensagens: {{{{{{{ JSON}} </p> <frid> </fid> </div> // Registre componente filho // Envie a mensagem atual out Vue.component ('Child', {Model: '#Child-template', dados: function () {return {msg: 'Hello}}, métodos: {notify: function () {se (this. this.msg) this.msg = '' } } }})// Initialize the parent component // Push the event into an array when the message is received var parent = new Vue({ el: '#events-example', data: { messages: [] }, // When creating an instance, the `events` option simply calls `$on` events: { 'child-msg': function (msg) { // The `this` No caso de retorno de chamada, está automaticamente ligado à instância em que está registrado.Use V-On para vincular eventos personalizados
O exemplo acima é muito bom, mas não podemos ver intuitivamente onde o evento "Child-MSG" vem do código do componente pai. Seria melhor se declararmos o manipulador de eventos onde os subcomponentes são usados em modelos. Para esses subcomponentes, você pode usar o V-ON para ouvir eventos personalizados:
<Child V-On: Child-Msg = "Handleit"> </fid>
Isso deixa claro: quando o componente filho aciona o evento "Child-MSG", o método "Handleit" do componente pai será chamado. Todo o código que afeta o estado do componente pai é colocado no método `handleit` do componente pai; O componente filho se concentra apenas no evento de desencadeamento.
Índice de Subcomponente
Apesar de adereços e eventos, às vezes ainda é necessário acessar os componentes filhos diretamente em JavaScript. Para esse fim, você pode usar o V-Ref para especificar um ID de índice para o componente filho. Por exemplo:
<div id = "pai"> <user-profile v-ref: perfil> </astar-profile> </div> var pai = new vue ({el: '#parent'}) // acessar componente filho var filho = pai. $ refs.profileQuando V-Ref e V-For são usados juntos, o REF é uma matriz ou objeto que contém componentes filhos correspondentes.
Use slot para distribuir conteúdo
Ao usar componentes, você geralmente precisa combiná -los assim:
<pp> <pp-header> </pp-header> <pp-footer> </pp-foloter> </pp>
Nota dois pontos:
1. O componente <pp> não sabe qual o conteúdo será em seu ponto de montagem. O conteúdo do ponto de montagem é determinado pelo componente pai de <pp>.
2. É provável que o componente <pp> tenha seu próprio modelo.
Para que os componentes sejam combinados, precisamos de uma maneira de misturar o conteúdo do componente pai com o próprio modelo do componente filho. Esse processamento é chamado de distribuição de conteúdo (ou "tradução" se você estiver familiarizado com o Angular). O Vue.js implementa uma API de distribuição de conteúdo que se refere ao rascunho atual de especificação de componentes da Web e usa um elemento especial <slot> como um slot para o conteúdo original.
Compilar escopo
Antes de mergulhar na API de distribuição de conteúdo, primeiro esclarecemos o escopo da compilação de conteúdo. Suponha que o modelo seja:
<nomin-componente>
{{msg}}
</componente filho>
O MSG deve estar vinculado aos dados do componente pai ou dados vinculados ao componente filho? A resposta é o componente pai. O escopo do componente é simplesmente:
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
Um erro comum é tentar vincular uma diretiva às propriedades/método de um componente filho no modelo de componente pai:
<!-inválido->
<Child-Component V-SHOW = "SOMECHILDPROPERTY"> </Child-Component>
Supondo que a SomechildProperty seja uma propriedade de um componente filho, o exemplo acima não funcionará conforme o esperado. O modelo de componente pai não deve saber o status do componente filho.
Se você deseja vincular instruções em um subcomponente ao nó raiz de um componente, você deve fazer isso em seu modelo:
Vue.component ('Child-Component', {// funciona porque está no modelo de escopo correto: '<div vs-Show = "SomechildProperty"> Child </div>', Data: function () {return {SomeChildProperty: true}}})Da mesma forma, o conteúdo de distribuição é compilado dentro do escopo do componente pai.
Slot único
O conteúdo do componente pai será descartado, a menos que o modelo de componente filho contenha <Slot>. Se o modelo do componente filho tiver apenas um slot sem características, todo o conteúdo do componente pai será inserido onde está o slot e o substituirá.
O conteúdo da tag <Slot> é considerado um conteúdo de reversão. O conteúdo de fallback é compilado dentro do escopo do componente filho e o conteúdo de fallback é exibido quando o elemento do host está vazio e não há conteúdo para inserção.
Suponha que o componente do meu componente tenha o seguinte modelo:
<div> <h1> Este é o meu componente! </lot> </div>
Modelo de componente pai:
<meu componente>
<p> Este é algum conteúdo original </p>
<p> Este é um conteúdo mais original </p>
</meu componente>
Resultado da renderização:
<div> <h1> Este é o meu componente!
Nomeado slot
O elemento <Slot> pode ser configurado com um nome de recurso especial para configurar como distribuir conteúdo. Vários slots podem ter nomes diferentes. Um slot nomeado corresponderá aos elementos no fragmento de conteúdo que possuem o atributo slot correspondente.
Ainda pode haver um slot anônimo, que é o slot padrão, como um slot de fallback para combinar fragmentos de conteúdo que não podem ser encontrados. Sem um slot padrão, esses fragmentos de conteúdo incomparáveis serão descartados.
Por exemplo, suponha que tenhamos um componente multi-inserção com um modelo como:
<div> <slot name = "One"> </lot> <slot> </lot> <slot name = "dois"> </slot> </div>
Modelo de componente pai:
<Multi-insertion> <P slot = "One"> um </p> <p slot = "dois"> dois </p> <p> Padrão a </p> </multi-inserção>
O resultado da renderização é:
<div> <p slot = "One"> um </p> <p> padrão a </p> <p slot = "dois"> dois </p> </div>
A API de distribuição de conteúdo é um mecanismo muito útil ao combinar componentes.
Componentes dinâmicos
Vários componentes podem usar o mesmo ponto de montagem e depois alternar dinamicamente entre eles. Use o elemento <componente> reservado para se ligar dinamicamente à sua propriedade IS:
new vue ({el: 'body', dados: {currentView: 'home'}, componentes: {home: {/ * ... */}, postagens: {/ * ... */}, arquivo: {/ * ... */}}}) <componente: is = "currentview/"> <!-componente quando v.Manter-se
Se o componente alterado for mantido na memória, ele poderá ser retido ou renderizado novamente. Para fazer isso, você pode adicionar um parâmetro de diretiva de manutenção:
<componente: is = "curtView" Keep-alive>
<!-componentes inativos serão armazenados em cache->
</componente>
Ative o gancho
Ao alternar os componentes, o corte em componentes pode exigir algumas operações assíncronas antes de cortar neles. Para controlar a duração da comutação de componentes, adicione um gancho de ativação ao componente de corte:
Vue.component ('Active-o Exemplo', {Activeate: function (done) {var self = this loadDataasync (function (data) {self.somedata = data done ()})}})Observe que o gancho Activate atua apenas durante a comutação dinâmica de componentes ou a renderização de inicialização de componentes estáticos e não age em inserção manual usando métodos de instância.
modo de transição
O recurso no modo de transição é usado para especificar como dois componentes dinâmicos transição.
Por padrão, insira e deixe a transição sem problemas. Este recurso pode especificar outros dois modos:
• INOUNT: o novo componente primeiro transita e, após a conclusão da transição, o componente atual passará a passar.
• Out-in: o componente atual primeiro transita e, após a conclusão da transição, o novo componente transita para o processo.
Exemplo:
<!-Desbote primeiro e depois desaparece em-> <componente: is = "view" transition = "fade" transition-mode = "out-in"> </component> .fade-transição {transição: opacity .3s facilidade;}.Variado
Componentes e V-for
Componentes personalizados podem usar V-for diretamente como elementos normais:
<my-component V-for = "Item em itens"> </my-Component>
No entanto, os dados não podem ser passados para um componente porque o escopo do componente é órfão. Para passar dados para componentes, deve -se usar adereços:
<meu componente
v-for = "Item em itens"
: item = "Item"
: index = "$ index">
</meu componente>
A razão pela qual o item não é injetado automaticamente no componente é que isso faz com que o componente seja fortemente acoplado ao V-For atual. Declare explicitamente de onde vem os dados e pode ser reutilizado em outros lugares para componentes.
Escrevendo componentes reutilizáveis
Ao escrever componentes, é benéfico lembrar se deve reutilizar componentes. Não há nada a ver com o acoplamento apertado de componentes descartáveis a outros componentes, mas componentes reutilizáveis devem definir uma interface pública clara.
A API do componente vue.js vem de três partes: Prop, eventos e slot:
• O Prop permite que o ambiente externo passe dados para componentes;
• Os eventos permitem que os componentes acionem ações no ambiente externo;
• O slot permite que o ambiente externo insira o conteúdo na estrutura de visão do componente.
Usando a sintaxe da abreviação de V-Bind e V-One, o recuo do modelo é claro e conciso:
<meu componente
: foo = "baz"
: bar = "qux"
@Event-A = "Dothis"
@Event-B = "Dothat">
<!-Conteúdo->
<img slot = "icon" src = "...">
<P slot = "Main-Text"> Olá! </p>
</meu componente>
Componentes assíncronos
Em aplicativos grandes, podemos precisar dividir o aplicativo em pedaços pequenos e baixá -lo do servidor apenas, se necessário. Para facilitar as coisas, o vue.js permite que o componente seja definido como uma função de fábrica, analisando dinamicamente a definição do componente. O Vue.js aciona apenas a função de fábrica quando o componente precisa ser renderizado e cache o resultado para renderização posterior. Por exemplo:
Vue.component ('async-Exemplo', function (resolver, rejeitar) {setTimeout (function () {resolve ({modelo: '<div> eu sou assíncrono! </div>'})}, 1000)})A função de fábrica recebe um retorno de chamada de resolução, chamado quando uma definição de componente baixada do servidor é recebida. Você também pode chamar rejeição (razão) para indicar que o carregamento falhou. Aqui o setTimeout é apenas para demonstração. Cabe a você obter os componentes. Função de segmentação de código recomendada com webpack:
Vue.component ('Async-webpack-Exemplo', function (resolve) {// Esta sintaxe especial diz que o webpack // dividiu automaticamente o código compilado em diferentes blocos, // esses blocos serão baixados automaticamente através da solicitação AJAX. Requer (['.Convenção de nomeação de recursos
Alguns recursos, como componentes e diretrizes, aparecem em modelos como atributos HTML ou elementos personalizados HTML. Como os nomes dos atributos HTML e nomes de tags não são sensíveis ao maiúsculas, o nome do recurso geralmente precisa usar a forma de caixa de kebab em vez de camelcase, que não é muito conveniente.
O vue.js suporta o nome de recursos na forma de camelcase ou pascalcase e os converte automaticamente em casos de kebab no modelo (semelhante à convenção de nomenclatura do prop):
// em componentes de definição de componentes: {// Registre myComponent com formulário de camelcase: {/ *... */}} <!-usando o formulário de kebab-case em modelos-> <my-component> </my-component> es6 objeto abrevitação literal também é fino: // PascalCalexBox da'../. './components/dropdown-menu' ;export padrão {components: {// write <xt-box> e <vlowDown-menu> TextBox, DropDownMenu}}Componentes recursivos
Os componentes podem se chamar recursivamente dentro de seus modelos, mas apenas se tiver a opção de nome:
var stackoverflow = vue.extend ({name: 'Stack-overflow', modelo: '<div>' + // chama-o recursivamente por si só '<lack-overflow> </sack-overflow>' + '</div>'})O componente acima causará um erro "Tamanho máximo da pilha excedido", portanto, verifique se a chamada recursiva possui uma condição de terminação. Quando um componente é registrado globalmente usando vue.component (), o ID do componente é automaticamente definido como a opção de nome do componente.
Instância de fragmento
Ao usar a opção de modelo, o conteúdo do modelo substitui o elemento de montagem da instância. Portanto, os elementos de nível superior do modelo recomendado são sempre elementos únicos.
Não escreva o modelo como este:
<div> nó raiz 1 </div>
<div> nó raiz 2 </div>
Recomenda -se escrever isso:
<div>
Eu tenho um único nó raiz!
<div> nó 1 </div>
<div> nó 2 </div>
</div>
As situações a seguir transformarão a instância em uma instância fragmentada:
1. O modelo contém vários elementos de nível superior.
2. O modelo contém apenas texto normal.
3. O modelo contém apenas outros componentes (outros componentes podem ser uma instância de fragmento).
4. O modelo contém apenas uma diretiva de elemento, como <s Parcial> ou <router-view> do Vue-Router.
5. O nó raiz do modelo possui uma instrução de controle de processo, como V-IF ou V-For.
Esses casos permitem que a instância tenha um número desconhecido de elementos de nível superior, que tratarão seu conteúdo DOM como um fragmento. A instância do fragmento ainda renderiza o conteúdo corretamente. No entanto, ele não possui um nó raiz, seu $ el aponta para um nó âncora, ou seja, um nó de texto vazio (um nó de comentário no modo de desenvolvimento).
Mais importante, porém, instruções de controle não processadas, recursos e transições sem propensos nos elementos dos componentes serão ignorados porque não há elemento raiz para ligação:
<!-Não, porque não há elemento raiz->
<Exemplo V-SHOW = "OK" Transition = "Fade"> </somemlem>
<!-Props sim->
<Exemplo: prop = "someedata"> </somemled>
<!-Controle de processo está ok, mas não há transição->
<Exemplo V-if = "OK"> </somemlem>
Obviamente, as instâncias de fragmento têm seus usos, mas geralmente é melhor dar ao componente um nó raiz. Ele garante que as instruções e o desempenho especial nos elementos dos componentes sejam convertidos corretamente e o desempenho também seja um pouco melhor.
Modelos embutidos
Se um componente filho tiver a propriedade em linha em linha, o componente tratará seu conteúdo como seu modelo em vez de tratá-lo como seu conteúdo de distribuição. Isso torna o modelo mais flexível.
<my-component inline-template>
<p> Estes são compilados como o próprio modelo do componente </p>
<p> não conteúdo de tradução dos pais. </p>
</meu componente>
No entanto, o modelo em linha dificulta o escopo do modelo e não pode cache os resultados da compilação de modelos. Uma prática recomendada é usar a opção de modelo para definir modelos dentro de um componente.
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
Para tutoriais nos componentes vue.js, clique no tutorial de aprendizado de componentes do Tópico Especial Vue.js para aprender.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.