O que é um componente: os componentes são 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.
Como registrar componentes?
Você precisa criar um componente usando o método Vue.Extend e, em seguida, registre o componente usando o método vue.component. O formato do método Vue.Extend é o seguinte:
var myComponent = vue.extend ({// opções ... eu vou apresentá -lo mais tarde})Se você deseja usar este componente criado em outro lugar, você deve nomeá -lo:
Vue.component ('meu componente', mycomponent)
Após a nomeação, você pode usar esse nome de componente na tag HTML, assim como o uso de um elemento DOM. Vamos dar uma olhada em um exemplo completo de registro e uso de componentes.
Código HTML:
<div id = "Exemplo"> <My-Component> </my-Component> </div>
Código JS:
// define var myComponent = vue.extend ({modelo: '<div> um componente personalizado!Resultado da saída:
<div id = "exemplo"> <div> Um componente personalizado! </div> </div
Componentes aninhados
O próprio componente também pode conter componentes. O seguinte componente pai contém um componente chamado Child-Component, mas esse componente só pode ser usado pelos componentes pais:
var filho = vue.extend ({modelo: '<div> um componente personalizado!O processo de definição acima é bastante pesado, e você não precisa chamar o vue.component e vue.extend Methods sempre:
// estende e registre vue.component ('my-component', {modelo: '<div> um componente personalizado!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. As colunas abaixo têm três componentes, postagens e arquivos instalados na mesma instância do VUE e alternam dinamicamente a exibição do componente através do recurso CurrentView.
Código HTML:
<div id = "dynamic"> <button id = "home"> home </botão> <button id = "posts"> postagens </button> <button id = "archive"> arquivo </button> <br> <componente: is = "currentview"> </ componente> </div>
Código JS:
var vue = new vue ({el: "#dinâmico", dados: {currentview: "home"}, componentes: {home: {model: "home"}, postagens: {model: "posts"}, archive: {model: "archive"}}}); "home";}; document.getElementById ("postagens"). OnClick = function () {Vue.currentview = "Posts";}; document.getElementById ("Archive"). OnClick = function () {Vue.CurrentView = "Archive";};Componentes e V-for
<my-component V-for = "Item em itens"> </my-Component>
Os dados não podem ser passados para um componente porque o escopo do componente é independente. 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.
Princípio recente aprofundado
Quando um componente liga os dados, como a ligação pode ser eficaz e pode modificar e adicionar dinamicamente os atributos? Dê uma olhada na seguinte introdução de princípios.
Como rastrear as alterações: passe um objeto diferente para a instância do VUE como uma opção para dados, o vue.js atravessará suas propriedades e o converterá para getter/setter com object.defineProperty. Este é um recurso ES5, e todos os vue.js não suportam o IE8 ou inferior.
Cada ligação de instrução/dados no modelo possui um objeto de observador correspondente, que registra os atributos como dependências durante o processo de cálculo. Depois disso, quando o setter dependente for chamado, o recálculo do observador será acionado. O processo é o seguinte:
Problema de detecção de alteração: o vue.js não pode detectar a adição ou remoção das propriedades do objeto. As propriedades devem estar nos dados para ativar o vue.js para convertê -los no modo getter/setter ser responsivo. Por exemplo:
var dados = {a: 1}; var vm = new vue ({data: data}); // `vm.a` e` data.a` agora são v.b responsivos = 2 // `vm.b` não é responsivo Data.b = 2 //` data.b` não é responsávelNo entanto, existem maneiras de adicionar atributos após a criação de instância e torná -lo correspondente. Você pode usar o método de instância Set (chave, valor):
vm. set ('b', 2)
// `vm.b` e` data.b` agora são responsivos
Para objetos normais, você pode usar métodos globais: Vue.Set (objeto, chave, valor):
Vue.Set (Data, 'C', 3)
// `vm.c` e` data.c` agora são responsivos
Inicializar dados: Embora o Vue.js forneça uma adição dinâmica das propriedades correspondentes, recomenda -se declarar todas as propriedades correspondentes no objeto de dados.
Não faça isso:
var vm = new Vue ({modelo: '<div> {{msg}} </div>'}) // adicione `msg`vm. $ set ('msg', 'hello!')Isso deve ser feito:
var VM = new Vue ({Data: {// declara `msg` msg: ''}, modelo: '<div> {{msg}}} </div>'}) // então defina` msg`vm.msg = 'hello!'Caso completo do componente
Os exemplos introduzidos abaixo implementam a função da janela modal e o código é relativamente simples.
Código HTML:
Implementar script para definir um modelo-> <script type = "x/modelo" id = "modal-template"> <!-se o modelo é exibido é definido através de v-show = "show", define o nome da animação-> <-sló v-show = "show" transição = "modal"> <div> <div> <! Cabeçalho padrão </lot> </div> <div> <!-O slot é equivalente ao espaço reservado para o corpo-> <slot name = "body"> corpo padrão </lot> </div> <div> <!-slot é equivalente ao pé do rodapé-[slot name = "Soster"> Footer </slot> </div> </div> </div> </div> </div> </div> </div> </div> </div> </script> <div id = "app"> <!-Defina o atributo da instância do VUE ao clicar no botão. O valor do showModal é verdadeiro-> <button id = "show-modal" @click = "showModal = true"> show modal </button> <!-modal é um plug-in personalizado. O recurso do plug-in mostra o recurso showModal da instância do Vue-> <modal: show.sync = "showModal"> <!-Substitua o conteúdo do slot no plugin modal e depois seja o cabeçalho-> <H3 slot = "Header"> Cabeçalho personalizado </h3> </modal> </div>
Código JS:
// Defina um plug-in com o nome modalvue.component ("modal", {// O modelo do plug-in está ligado ao conteúdo do elemento DOM com o ID do modelo modal-template: "#modal-template", props: {// O tipo é boolean Show: {{}}} // instanciado vue, o escopo está sob o ID do elemento do aplicativo, novo vue ({el: "#app", dados: {// o valor padrão é false showModal: false}});Código CSS:
.Modal-mask {Posição: fixado; Z-Index: 9998; topo: 0; Esquerda: 0; largura: 100%; Altura: 100%; cor de fundo: rgba (0, 0, 0, .5); exibição: tabela; transição: opacidade .3s facilidade;}. Alinhamento vertical: meio;}. Modal-container {width: 300px; margem: 0px automático; preenchimento: 20px 30px; Background-Color: #FFF; Radio de fronteira: 2px; Box-Shadow: 0 2px 8px rgba (0, 0, 0, .33); Transição: Todos .3s facilitam; Fonte-família: Helvetica, Arial, Sans-Serif;}. Modal-cabeçalho H3 {margin-top: 0; Cor: #42B983;}. Corpo modal {margin: 20px 0;}. Modal-default-Button {float: Right;}/** Os seguintes estilos são aplicados automaticamente por elementos com ** V-Transition = "modal" quando a visibilidade é alterada por vue.js. Styles.*/. Transformar: escala (1.1);}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.
Como não usei as funções dos componentes em profundidade no projeto, não tenho um profundo entendimento dos componentes, e a introdução é relativamente superficial. Obrigado pela sua leitura.