close

Components em Vue.js: Criando, Reutilizando e Transmitindo Dados

Components são um conceito crucial no Vue.js que permite que você crie aplicativos da Web estruturados e sustentáveis. Com components, você pode dividir seu aplicativo em partes pequenas e independentes, cada uma responsável por uma parte específica da interface do usuário.

Neste artigo, exploraremos como criar components em Vue.js, usá-los para reutilizar código e passar dados entre arquivos components. Vamos nos aprofundar no uso props para passar dados de um componente pai para um componente filho e no uso de eventos para passar dados de um componente filho de volta para seu componente pai.

 

1. Criando Components

Components em Vue.js pode ser criado usando o método `Vue.component` ou definindo arquivo único components. 

 Exemplo:  

// Global Component using Vue.component  
Vue.component('my-component', {  
  // Component options  
});  
  
// Local Component using single-file component  
// MyComponent.vue  
<template>  
  <!-- Component template -->  
</template>  
  
<script>  
export default {  
  // Component options  
};  
</script>

 

2. Estrutura do Componente

Um componente Vue consiste em um modelo, script e estilos opcionais. O modelo contém a marcação HTML, o script contém as opções do componente(dados, métodos, propriedades calculadas, ganchos de ciclo de vida) e os estilos definem a aparência do componente.

Exemplo:

<template>  
  <div>  
    <h1>{{ message }}</h1>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!',  
      count: 0  
    };  
  },  
  methods: {  
    increment() {  
      this.count++;  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* Component styles */  
</style>

 

3. Reutilização de componentes

Components no Vue.js pode ser reutilizado em seu aplicativo, reduzindo a duplicação de código e melhorando a capacidade de manutenção. Eles promovem uma abordagem modular, permitindo que você componha menores components em maiores.

Exemplo:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component></child-component>  
    <child-component></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
};  
</script>

 

4. Props

Props permitem que você passe dados de pai components para filho components. Props são declarados no componente filho e podem ser usados ​​como propriedades de dados regulares.

Exemplo:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component:message="parentMessage"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from parent!'  
    };  
  }  
};  
</script>  
  
// ChildComponent.vue  
<template>  
  <div>  
    <h2>{{ message }}</h2>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['message']  
};  
</script>

 

5. Eventos Personalizados

Components podem emitir eventos personalizados para se comunicar com seus pais components. Os pais components podem ouvir esses eventos e reagir de acordo.

Exemplo:

// ChildComponent.vue  
<template>  
  <div>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    increment() {  
      this.$emit('increment-event');  
    }  
  }  
};  
</script>  
  
// ParentComponent.vue  
<template>  
  <div>  
    <child-component @increment-event="handleIncrement"></child-component>  
    <p>Count: {{ count }}</p>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      count: 0  
    };  
  },  
  methods: {  
    handleIncrement() {  
      this.count++;  
    }  
  }  
};  
</script>

 

Esses exemplos mostram os principais conceitos do Vue.js components, demonstrando sua flexibilidade, capacidade de reutilização e recursos de comunicação. Components ajudam a criar código modular e sustentável, tornando o Vue.js uma estrutura poderosa para a construção de aplicativos escaláveis.