¿Qué es la función de configuración ()?
Primero, echemos un vistazo a la función setup(). La función setup() es una función especial que juega un papel muy importante en los componentes de Vue. Su tarea principal es organizar los datos, los métodos y las funciones del ciclo de vida de un componente en una sola función para que se pueda acceder a ellos fácilmente cuando se crea una instancia del componente.
¿Suena complicado? No importa, veamos un ejemplo simple. Digamos que tenemos un componente que tiene una propiedad de datos llamada mensaje y un método llamado mensaje inverso que queremos usar en el componente. Entonces, podemos escribir la función setup() así:
export default {
setup() {
const message = 'Hello, world!';
function reverseMessage() {
return message.split('').reverse().join('')
}
return {
message,
reverseMessage
}
}
}
En el código anterior, definimos una función setup() que devuelve un objeto que contiene un mensaje y un mensaje inverso. En componentes podemos usarlos así:
<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>
En este ejemplo, usamos la función ref de Vue para crear un mensaje de datos receptivo. Luego, definimos un método reverseMessage en la función setup() y devolvimos un objeto que contenía el mensaje y el mensaje inverso. Finalmente, usamos mensaje y mensaje inverso en la plantilla del componente.
Al ver esto, es posible que tenga una pregunta: ¿Cómo se devuelven las funciones y los atributos de datos en el objeto en la función setup() utilizada en el componente? De hecho, cuando devuelve un objeto en la función setup(), Vue vinculará estas funciones y propiedades de datos a las propiedades de datos de la instancia del componente para que puedan usarse en la plantilla. Por lo tanto, puede usar el mensaje y el mensaje inverso en plantillas como las anteriores.
Por supuesto, la función setup() tiene más usos. También puede usar parámetros para recibir accesorios, emitir eventos y más. Si desea obtener más información sobre cómo usar la función setup(), puede consultar la documentación oficial de Vue.
Si desea utilizar el evento emit en la función setup(), puede escribirlo así:
export default {
setup(props, {
emit }) {
function buttonClicked() {
emit('button-clicked', props.message)
}
return {
buttonClicked
}
}
}
En el código anterior, podemos acceder a la función props y emit en la función setup(). props es un objeto que contiene los valores de propiedad recibidos por el componente. emit es un objeto que nos permite emitir eventos en componentes. En este ejemplo, definimos una función llamada buttonClicked, y cuando se llama a esta función, activa un evento llamado 'button-clicked' y pasa props.message como parámetro al controlador de eventos. Finalmente, devolvemos un objeto que contiene buttonClicked.
En la plantilla del componente, podemos usar la función buttonClicked así:
<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>
En este ejemplo, usamos un botón en la plantilla para activar la función buttonClicked. La función buttonClicked imprime un mensaje en la consola cuando se hace clic en el botón. Por supuesto, este ejemplo es solo un ejemplo simple, puede usar el evento emit según sus necesidades.