Jedi Cat Vue.js

# Components

Para se usar um componente bastar importar ele, declarar em components e depois usar.

<template>
  <div>
    <ComponenteUm></ComponenteUm>
    <componente-um></componente-um>

    <ComponenteDois />
    <componente-dois/>
  </div>
</template>

<script>
const ComponenteUm = () => import('@/components/ComponenteUm')
const ComponenteDois = () => import('@/components/ComponenteDois')

export default {
  name: 'App',
  data () {
    return {
    }
  },
  components: {
    ComponenteUm,
    ComponenteDois
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Para passar valor por meio das propriedades

<template>
  <div>
    <ComponenteUm :valores='valor' :novo="novoArray" outraProp="valor qualquer" :soma="{ 10 + 5}" />
  </div>
</template>

<script>
const ComponenteUm = () => import('@/components/ComponenteUm')

export default {
  name: 'App',
  data () {
    return {
      valor: 10,
      novoArray: [10, 20, 30]
    }
  },
  components: {
    ComponenteUm
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Quando for passar valores para as propriedades de um componente, se o valor vou um dado, variavel, computed ou javascript por meio de {}, usa o : na frente do nome da prorpriedade, caso contrario é somente passar o valor.

# Nomenclatura

BASE: Componentes que se aplicam a estilos e convenções especificas da aplicação.

Devem ser declarados com base, app ou v no começo do nome.

Por exemplo:

  • MeuInput.vue
  • MeuBotao.vue
  • Icone.vue
  • ...

Estes anteriores seriam formas ruins de declarar componentes base.

Uma boa forma seria:

base

  • BaseInput.vue
  • BaseBotao.vue
  • BaseIcon.vue

app

  • AppInput.vue
  • AppBotao.vue
  • AppIcon.vue

v

  • VInput.vue
  • VBotao.vue
  • VIcon.vue

INSTANCIA UNICA: Componentes que devem ter apenas uma instancia dentro de cada pagina. Por exemplo em uma pagina X que tenha um rodape, logo você não tem dois rodapes ou dois componentes sendo declarados.

  • Rodape.vue
  • Menu.vue
  • MySidebar.vue

Uma boa forma seria:

  • TheRodape.vue ou TheFooter.vue
  • TheMenu.vue
  • TheSidebar.vue

ORDEM DAS PALAVRAS: Devem começar com a palavra de mais alto nivel e terminar com palavras que descrevem modificações.

  • GeneroCheckbox.vue
  • PesquisaInput.vue
  • LimparPesquisaBotao.vue
  • RodarPesquisaBotao.vue

Uma boa forma seria:

  • SetaCheckboxGenero.vue
  • PesquisaInput.vue
  • BotaoLimparPesquisa.vue
  • BotaoPesquisa.vue

Ou separando por grupo e ação

  • PesquisaBotaoLimpar.vue
  • PesquisaBotao.vue
  • PesquisaInput.vue

# Globalmente

Para declarar um componente globalmente, no arquivo main.js

import Vue from 'vue'
...
import Componente from '@/components/Componente'

Vue.component('nome-componente', Componente)

...

new Vue({
  ...
  render: h => h(App),
}).$mount('#app');
1
2
3
4
5
6
7
8
9
10
11
12

Para nao sobrecarregar o main.js podemos criar um arquivo chamado index.js no diretorio components e colocar este conteudo

import Vue from 'vue'
import Componente from '@/components/Componente'
import Componente2 from '@/components/Componente2'

Vue.component('nome-componente', Componente)
Vue.component('nome-componente2', Componente2)
1
2
3
4
5
6

E no main.js importar este arquivo

import Vue from 'vue'
...
import '@/components'

...

new Vue({
  ...
  render: h => h(App),
}).$mount('#app');
1
2
3
4
5
6
7
8
9
10

← Props →