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.