setup(props,context){}
El primer parámetro props:
props es un objeto que contiene todos los datos pasados por el componente principal al componente secundario.
Utilice accesorios en componentes secundarios para recibir.
Un objeto que contiene todas las propiedades declaradas y pasadas en la configuración
. Es decir: si desea generar el valor pasado por el componente principal al componente secundario a través de accesorios.
Necesita utilizar accesorios para recibir la configuración. Es decir, props:{......}
Si no acepta la configuración a través de Props, el valor de salida no está definido
<plantilla>
<div>
Componente principal</div>
<no-cont :mytitle="msg"
othertitle="Título de otros"
@sonclick="sonclick">
</sin continuación>
</plantilla>
<guión>
importar NoCont desde "../components/NoCont.vue"
exportar predeterminado {
configuración () {
deja mensaje={
título: 'Datos del componente principal al componente secundario'
}
función sonclick(msss:cadena){
consola.log(msss)
}
devolver {msj,sonclick}
},
componentes:{
Sin continuación
}
}
</script> <plantilla>
<div @click="sonHander">
Soy los datos en el componente secundario</div>
</plantilla>
<guión>
importar {definirComponent,setup} desde 'vue';
exportar defineComponent predeterminado ({
nombre: 'Sin continuación',
// No se acepta // accesorios:{
// mi título:{
// tipo:Objeto
// }
// },
configuración(accesorios,contexto){
console.log('props==>',props.mytitle);//El valor de salida no está definido
función sonHander(){
context.emit('sonclick','El componente secundario se pasa al componente principal')
}
devolver {sonHander}
}
});
</script>
¿Por qué el valor generado a través de props.mytitle no está definido?
Porque no utilizamos accesorios para recibir la configuración. Esos son
accesorios: {
mi título:{
tipo:Objeto
}
}, si agregamos la configuración de aceptación
El segundo parámetro: contexto, es un objeto.
Hay atributos dentro (un objeto que obtiene todos los atributos en la etiqueta actual),
pero este atributo son todos los objetos que no están declarados para recibirse en accesorios.
Si usa accesorios para obtener el valor y al mismo tiempo declara el valor que desea obtener en los accesorios
: el valor obtenido no está definido
.Nota:
obtener el valor de los atributos no requiere ninguna declaración en los accesorios para recibirlo. .
El valor obtenido por los primeros accesorios de parámetro debe declararse en los accesorios para recibir
la distribución del evento de emisión (este evento debe usarse al pasarlo al componente principal)
y las ranuras
<plantilla>
<div @click="sonHander">
Soy los datos en el componente secundario</div>
</plantilla>
<guión>
importar {definirComponent,setup} desde 'vue';
exportar defineComponent predeterminado ({
nombre: 'Sin continuación',
accesorios:{
mi título:{
tipo:Objeto
}
},
configuración(accesorios,contexto){
//Salida {título: valor pasado por el componente principal}
console.log('props==>',props.mytitle);
// Genera los títulos de otras personas [usa el contexto para obtener el valor, no es necesario usar accesorios para aceptar]
console.log('context==> ',context.attrs.othertitle);
// Salida indefinida, porque el contexto no necesita usar accesorios para aceptar.
console.log('contextmytitle==> ',context.attrs.mytitle);
función sonHander(){
context.emit('sonclick','El componente secundario se pasa al componente principal')
}
devolver {sonHander}
}
});
</script>
3. El componente secundario envía eventos al componente principal
<plantilla>
<div @click="sonHander">
Soy los datos en el componente secundario</div>
</plantilla>
<guión>
importar {definirComponent,setup} desde 'vue';
exportar defineComponent predeterminado ({
nombre: 'Sin continuación',
accesorios:{
mi título:{
tipo:Objeto
}
},
configuración(accesorios,contexto){
función sonHander(){
context.emit('sonclick','El componente secundario se pasa al componente principal')
}
devolver {sonHander}
}
});
</script> 4. Optimice el envío de eventos.
Sabemos que el contexto del segundo parámetro es un objeto
y el objeto tiene tres atributos: atributos, ranuras y emisión.
Al enviar eventos, está bien usar emitir directamente
<template>.
<div @click="sonHander">
Soy los datos en el componente secundario</div>
</plantilla>
<guión>
importar {definirComponent,setup} desde 'vue';
exportar defineComponent predeterminado ({
nombre: 'Sin continuación',
accesorios:{
mi título:{
tipo:Objeto
}
},
configuración (props, {atributos, ranuras, emitir}) {
//Utiliza emitir directamente para la función de envío de eventos sonHander(){
emit('sonclick','El componente secundario se pasa al componente principal')
}
devolver {sonHander}
}
});
</script> 5. Obtenga el valor pasado por el componente principal
Usaremos el parámetro props para obtener el valor
y attrs para obtener el valor
<template>.
<hr/>
<h2>Subcomponente</h2>
<div @click="sonHander">
Soy los datos en el componente secundario</div>
<h2>Declaración de accesorios usados para recibir ==>{{ mytitle }}</h2>
<h2>Utilice atributos de parámetro para obtener ==>{{ attrs.othertitle }}</h2>
</plantilla>
<guión>
importar {definirComponent,setup} desde 'vue';
exportar defineComponent predeterminado ({
nombre: 'Sin continuación',
accesorios:{
mi título:{
tipo:Objeto
}
},
configuración (props, {atributos, ranuras, emitir}) {
función sonHander(){
emit('sonclick','El componente secundario se pasa al componente principal')
}
devolver {sonHander,attrs}
}
});
</script>
Para obtener más información, se proporciona una explicación detallada de los parámetros de la función de configuración. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP.
