O que é a função setup()?
Primeiro, vamos dar uma olhada na função setup(). A função setup() é uma função especial que desempenha um papel muito importante nos componentes Vue. Sua principal tarefa é organizar os dados, métodos e funções do ciclo de vida de um componente em uma função para que possam ser acessados facilmente quando o componente for instanciado.
Parece complicado? Não importa, vamos ver um exemplo simples. Digamos que temos um componente que possui uma propriedade de dados chamada message e um método chamado reverseMessage que queremos usar no componente. Então, podemos escrever a função setup() assim:
export default {
setup() {
const message = 'Hello, world!';
function reverseMessage() {
return message.split('').reverse().join('')
}
return {
message,
reverseMessage
}
}
}
No código acima, definimos uma função setup() que retorna um objeto contendo message e reverseMessage. Em componentes, podemos usá-los assim:
<template>
<div>
<p>{
{ message }}</p>
<button @click="reverseMessage">Reverse Message</button>
</div>
</template>
<script>
import {
defineComponent, ref } from 'vue'
import template from './MyComponent.vue'
export default defineComponent({
setup() {
const message = ref('Hello, world!')
function reverseMessage() {
return message.value.split('').reverse().join('')
}
return {
message,
reverseMessage
}
}
render: template
})
</script>
Neste exemplo, usamos a função ref do Vue para criar uma mensagem de dados responsiva. Em seguida, definimos um método reverseMessage na função setup() e retornamos um objeto contendo message e reverseMessage. Finalmente, usamos message e reverseMessage no template do componente.
Vendo isso, você pode ter uma pergunta: Como são as funções e atributos de dados no objeto retornado pela função setup() utilizada no componente? Na verdade, quando você retorna um objeto na função setup(), o Vue vinculará essas funções e propriedades de dados às propriedades de dados da instância do componente para que possam ser usadas no modelo. Assim, você pode usar message e reverseMessage em modelos como acima.
Claro, a função setup() tem mais usos. Ele também pode usar parâmetros para receber props, emitir eventos e muito mais. Se você quiser saber mais sobre como usar a função setup(), você pode conferir a documentação oficial do Vue.
Se você quiser usar o evento emit na função setup(), você pode escrevê-lo assim:
export default {
setup(props, {
emit }) {
function buttonClicked() {
emit('button-clicked', props.message)
}
return {
buttonClicked
}
}
}
No código acima, podemos acessar a função props e emit na função setup(). props é um objeto que contém os valores das propriedades recebidas pelo componente. emit é um objeto que nos permite emitir eventos em componentes. Neste exemplo, definimos uma função chamada buttonClicked e, quando essa função é chamada, ela dispara um evento chamado 'button-clicked' e passa props.message como um parâmetro para o manipulador de eventos. Finalmente, retornamos um objeto contendo buttonClicked.
No template do componente, podemos usar a função buttonClicked assim:
<template>
<div>
<button @click="buttonClicked">Click Me!</button>
</div>
</template>
<script>
import {
defineComponent, ref } from 'vue'
import template from './MyComponent.vue'
export default defineComponent({
setup() {
const message = ref('Hello, world!')
function buttonClicked() {
console.log('Button clicked!')
}
return {
message,
buttonClicked
}
}
render: template
})
</script>
Neste exemplo, usamos um botão no modelo para acionar a função buttonClicked. A função buttonClicked imprime uma mensagem para o console quando o botão é clicado. Claro, este exemplo é apenas um exemplo simples, você pode usar o evento emit de acordo com suas necessidades.