Componentes

Os componentes Vue são uma das principais funcionalidades do framework Vue.js. Eles permitem que os desenvolvedores dividam suas interfaces de usuário em partes reutilizáveis e independentes, facilitando a criação de interfaces de usuário escaláveis e fáceis de manter. Um componente Vue é basicamente um objeto Vue que encapsula uma seção de interface do usuário, incluindo seu HTML, CSS e JavaScript.

Aqui está um exemplo básico de como criar um componente Vue:

  <template>
      <div>
        <h1>{{ title }}</h1>
        <p>{{ message }}</p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'MyComponent',
      props: {
        title: String,
        message: String
      }
    }
    </script>
    
    <style>
    h1 {
      font-size: 24px;
    }
    p {
      font-size: 16px;
    }
    </style>

Neste exemplo, definimos um componente Vue chamado "MyComponent". O componente inclui um template, um script e um estilo. O template contém o HTML que será renderizado quando o componente for usado. O script inclui o código JavaScript que define o componente, incluindo suas propriedades e métodos. O estilo inclui as regras CSS para estilizar o componente.

Além disso, o componente Vue possui propriedades e eventos personalizados que permitem passar dados para o componente e emitir eventos para notificar outros componentes sobre mudanças. As propriedades são definidas no objeto props do componente e os eventos personalizados são definidos usando o método $emit do componente.

Para usar o componente Vue, você pode simplesmente importá-lo em outro componente ou em seu aplicativo principal, e usá-lo como um elemento HTML personalizado, como este:

  <template>
      <div>
        <my-component title="Welcome" message="Hello, World!" />
      </div>
    </template>
    
    <script>
    import MyComponent from '@/components/MyComponent.vue'
    
    export default {
      components: {
        MyComponent
      }
    }
    </script>

Neste exemplo, importamos o componente MyComponent e o registramos como um componente personalizado usando o objeto components. Em seguida, usamos o componente como um elemento HTML personalizado, passando as propriedades title e message para ele. O resultado é que o componente será renderizado com o título "Welcome" e a mensagem "Hello, World!".