VueJS - Componentes

Vue Components são um dos recursos importantes do VueJS que cria elementos personalizados, que podem ser reutilizados em HTML.

Vamos trabalhar com um exemplo e criar um componente, que dará uma melhor compreensão de como os componentes funcionam com o VueJS.

Exemplo

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

No arquivo .html, criamos dois div com id component_test e component_test1. No.jsarquivos mostrados acima, duas instâncias Vue são criadas com os ids div. Criamos um componente comum para ser usado com ambas as instâncias de visualização.

Para criar um componente, a seguir está a sintaxe.

Vue.component('nameofthecomponent',{ // options});

Depois que um componente é criado, o nome do componente se torna o elemento personalizado e o mesmo pode ser usado no elemento de instância Vue criado, ou seja, dentro do div com ids component_test e component_test1.

No .js arquivo, usamos um componente de teste como o nome do componente e o mesmo nome é usado como o elemento personalizado dentro dos divs.

Exemplo

<div id = "component_test">
   <testcomponent></testcomponent>
</div>
<div id = "component_test1">
   <testcomponent></testcomponent>
</div>

No componente criado no .jsarquivo, adicionamos um modelo ao qual atribuímos um código HTML. Esta é uma forma deregistering a global component, que pode ser parte de qualquer instância vue, conforme mostrado no script a seguir.

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});

Na execução, o mesmo será refletido no navegador.

Os componentes recebem a tag de elemento personalizado, ou seja, <testcomponent></testcomponent>. No entanto, quando inspecionamos o mesmo no navegador, não notaremos a tag personalizada em HTML simples presente no modelo, conforme mostrado na imagem a seguir.

Também tornamos diretamente os componentes uma parte da instância vue, conforme mostrado no script a seguir.

var vm = new Vue({
   el: '#component_test',
   components:{
      'testcomponent': {
         template : '<div><h1>This is coming from component</h1></div>'
      }
   }
});

Isso é chamado local registration e os componentes farão parte apenas da instância vue criada.

Até agora, vimos o componente básico com as opções básicas. Agora, vamos adicionar mais algumas opções, como dados e métodos. Assim como a instância Vue possui dados e métodos, o componente também compartilha os mesmos. Portanto, iremos estender o código, que já vimos com dados e métodos.

Exemplo

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
   data: function() {
      return {
         name : "Ria"
      }
   },
   methods:{
      changename : function() {
         this.name = "Ben";
      },
      originalname: function() {
         this.name = "Ria";
      }
   }
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

No .jsarquivo acima, adicionamos dados que são uma função, que retorna um objeto. O objeto possui uma propriedade de nome, à qual é atribuído o valor 'Ria'. Isso é usado no seguinte modelo.

template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',

Apesar de termos dados como uma função nos componentes, podemos usar suas propriedades da mesma forma que usamos com a instância direta do Vue. Além disso, existem dois métodos adicionados, changename e originalname. Em changename, estamos alterando a propriedade name e em originalname estamos redefinindo-a de volta para o nome original.

Também adicionamos dois eventos no div, mouseover e mouseout. Os detalhes dos eventos serão discutidos no capítulo Eventos. Por enquanto, chamadas de mouseoverchangename método e chamadas de mouseout originalname método.

A exibição do mesmo é mostrada no navegador a seguir.

Conforme visto no navegador acima, ele exibe o nome atribuído na propriedade de dados, que é o mesmo nome. Também atribuímos um evento mouseover no div e também um mouseout. Vamos ver o que acontece quando colocamos o mouse sobre e para fora.

Ao passar o mouse, vemos que o nome do primeiro componente foi alterado para Ben, no entanto, o segundo permanece como está. Isso ocorre porque o componente de dados é uma função e retorna um objeto. Assim, quando é alterado em um local, o mesmo não é sobrescrito em outros casos.

Componentes Dinâmicos

Os componentes dinâmicos são criados usando a palavra-chave <component></component> e é vinculado por meio de uma propriedade, conforme mostrado no exemplo a seguir.

Exemplo

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <component v-bind:is = "view"></component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

Resultado

O componente dinâmico é criado usando a seguinte sintaxe.

<component v-bind:is = "view"></component>

Tem v-bind: is = ”view”, e uma view de valor é atribuída a ele. A visualização é definida na instância Vue da seguinte maneira.

var vm = new Vue({
   el: '#databinding',
   data: {
      view: 'component1'
   },
   components: {
      'component1': {
         template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
      }
   }
});

Quando executado, o modelo Dynamic Component é exibido no navegador.