methods Métodos de manipulação de eventos
Última atualização: 2026-10-22
methods Métodos de manipulação de eventos
A opção methods reúne as funções do componente usadas como manipuladores de eventos e helpers, chamadas pelo nome a partir dos templates.
| Grupo | Opções: Estado |
|---|---|
| Tipo | Opção |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
export default {
data() { return { count: 0 } },
methods: {
add(n) { this.count += n }
}
}⚙️ Argumentos
| value | Um objeto de funções; this aponta para a instância do componente |
|---|
Retorno：Sem convenção de retorno (os retornos não são rastreados automaticamente)
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The buttons add 1 and 5 respectively.💡 Pontos-chave
⚠️ Aviso Evite arrow functions — elas não vinculam this à instância.
💡 Dica Passe o nome sem parênteses, a menos que precise de argumentos.
ℹ️ Nota Prefira computed para valores derivados; reserve methods para comportamento.
🏷️ Estado relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Como fica a divisão entre methods e computed?
R Valores em cache → computed; ações e argumentos → methods.
P Por que às vezes this é undefined?
R Geralmente por uma arrow function ou por desestruturar o método para fora da instância.
P Um método pode chamar outro?
R Sim — this.other() compartilha a mesma instância.
