Azúcar sintáctico de la configuración de Vue3, métodos para pasar varios tipos de datos entre componentes principales y secundarios

Azúcar sintáctico de la configuración de Vue3 , métodos para pasar varios tipos de datos entre componentes principales y secundarios

1. El componente principal usa azúcar sintáctico para pasar el tipo de cadena al componente secundario

        1. Componente principal

msg es el nombre de su variable personalizada, que se usa para pasar a los componentes secundarios, y el contenido son los datos que se pasan a los componentes secundarios desde su componente principal.

   
   
    
    
<plantilla>
<div> _ _
< Hola :msg = "contenido" />
</div> _ _
</plantilla>

< configuración del guión >
importar {ref} de "vue" ;
importar Hola desde "../components/HelloWorld.vue" ;
const contenido = ref ( "Eso es todo" );
</ guión >
   
   
    
    

        2. Subcomponentes

En el azúcar sintáctico, puede escribir directamente los datos que pasó en el método de props = defineProps (), y finalmente llamarlos en la plantilla.

   
   
    
    
< plantilla >
<div> _ _
< h 1 > { { props.msg }} < / h 1 >
< / div >
< / plantilla >

< configuración del guión >
const apoyos = defineProps({
mensaje : Cadena ,
});
< / guión >
   
   
    
    

 Al final, el efecto es así.

2. El componente principal usa azúcar sintáctico para pasar el tipo de matriz al componente secundario

1. Transferencia de componentes principales

 DateList en el componente es el nombre que declara pasar al subcomponente, y ArrayList es la información que desea pasar al subcomponente.

   
   
    
    
< plantilla >
<div> _ _
< Hola :DateList = "ArrayList" / >
< / div >
< / plantilla >

< configuración del guión >
importar { reactivo } de "vue" ;
importar Hola desde "../components/HelloWorld.vue" ;
const ArrayList = reactivo ([
{
identificación : 1 ,
na me: "Extrajudicial" ,
},
{
identificación : 2 ,
na yo: "Loco" ,
},
{
identificación : 3 ,
nombre mío: "Zhang San" ,
},
]);
< / guión >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

2. Recepción de subcomponentes

En el azúcar sintáctico, puede escribir directamente los datos que pasó a través del método props = defineProps(), y finalmente hacer un bucle en la salida en la plantilla y estará bien

   
   
    
    
< plantilla >
<div> _ _
< h 1 > { { props.msg }} < / h 1 >
< div v-for = "(elemento, índice) en props.DateList" : clave = "item.id" >
{ { elemento.nombre }}
< / div >
< / div >
< / plantilla >

< configuración del guión >
const apoyos = defineProps({
mensaje : Cadena ,
Lista de fechas : Matriz,
});
consola e.log(props.DateList);
< / guión >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

efecto de renderizado

3. Los subcomponentes usan azúcar sintáctico para pasar valores de palabras a los componentes principales

1. Subcomponentes

 Necesita usar eventos para transferir de hijo a padre, deje que emigFun = defineEmits(["handLer"]); Use el azúcar sintáctico defineEmits para crear un evento personalizado, y luego pase el tipo que desea pasar de acuerdo con el evento personalizado (como mostrado a continuación)

   
   
    
    
< plantilla >
<div> _ _
< div @click = "divertido" >
padre del niño
< / div >
< / div >
< / plantilla >

< configuración del guión >
importar { reactivo } de "vue" ;
let em igFun = defineEmits([ "handLer" ] ); // Usa el método sugar sintáctico defineEmits para crear eventos personalizados.
const dat = reactivo([
{
nombre mío: 123 ,
identificación : 1 ,
},
{
nombre mío: 123 ,
identificación : 1 ,
},
{
nombre mío: 123 ,
identificación : 1 ,
},
{
nombre mío: 123 ,
identificación : 1 ,
},
]);
diversión constante = () = > {
emig Fun( "handLer" , dat); // El lado izquierdo es el nombre de su evento personalizado, y el lado derecho son los datos que desea pasar .
};
< / guión >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

2. Componente principal

El componente principal puede usar directamente el evento personalizado creado por su componente secundario, agregar el nombre del evento de su componente principal y obtener con éxito los datos del componente secundario a través de parámetros formales (como se muestra a continuación)

   
   
    
    
< plantilla >
<div> _ _
< Hola @handLer = "mano" / >
<div> _ _
Haga clic para obtener el valor del subcomponente
< / div >
< / div >
< / plantilla >

< configuración del guión >
importar Hola desde "../components/HelloWorld.vue" ;
const mano = (v) = > {
contras ole.log(v);
};
< / guión >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

Mostrar resultados

Resumir

Además, hay algunos problemas con el uso del azúcar sintáctico de configuración. Te lo contaré en el próximo artículo. En segundo lugar, los componentes padre-hijo de Vue se pasan valores entre sí. Es fácil que los novatos se confundan cuando pasándolos de un lado a otro. Aclare sus pensamientos y tómese su tiempo. ¿Qué es mejor? Si tiene alguna idea o idea, comente a continuación.

 

Azúcar sintáctico de la configuración de Vue3 , métodos para pasar varios tipos de datos entre componentes principales y secundarios

1. El componente principal usa azúcar sintáctico para pasar el tipo de cadena al componente secundario

        1. Componente principal

msg es el nombre de su variable personalizada, que se usa para pasar a los componentes secundarios, y el contenido son los datos que se pasan a los componentes secundarios desde su componente principal.

   
   
  
  
<plantilla>
<div> _ _
< Hola :msg = "contenido" />
</div> _ _
</plantilla>

< configuración del guión >
importar {ref} de "vue" ;
importar Hola desde "../components/HelloWorld.vue" ;
const contenido = ref ( "Eso es todo" );
</ guión >
   
   
  
  

        2. Subcomponentes

En el azúcar sintáctico, puede escribir directamente los datos que pasó en el método de props = defineProps (), y finalmente llamarlos en la plantilla.

   
   
  
  
< plantilla >
<div> _ _
< h 1 > { { props.msg }} < / h 1 >
< / div >
< / plantilla >

< configuración del guión >
const apoyos = defineProps({
mensaje : Cadena ,
});
< / guión >
   
   
  
  

 Al final, el efecto es así.

2. El componente principal usa azúcar sintáctico para pasar el tipo de matriz al componente secundario

1. Transferencia de componentes principales

 DateList en el componente es el nombre que declara pasar al subcomponente, y ArrayList es la información que desea pasar al subcomponente.

   
   
  
  
< plantilla >
<div> _ _
< Hola :DateList = "ArrayList" / >
< / div >
< / plantilla >

< configuración del guión >
importar { reactivo } de "vue" ;
importar Hola desde "../components/HelloWorld.vue" ;
const ArrayList = reactivo ([
{
identificación : 1 ,
na me: "Extrajudicial" ,
},
{
identificación : 2 ,
na yo: "Loco" ,
},
{
identificación : 3 ,
nombre mío: "Zhang San" ,
},
]);
< / guión >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

2. Recepción de subcomponentes

En el azúcar sintáctico, puede escribir directamente los datos que pasó a través del método props = defineProps(), y finalmente hacer un bucle en la salida en la plantilla y estará bien

   
   
  
  
< plantilla >
<div> _ _
< h 1 > { { props.msg }} < / h 1 >
< div v-for = "(elemento, índice) en props.DateList" : clave = "item.id" >
{ { elemento.nombre }}
< / div >
< / div >
< / plantilla >

< configuración del guión >
const apoyos = defineProps({
mensaje : Cadena ,
Lista de fechas : Matriz,
});
consola e.log(props.DateList);
< / guión >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

efecto de renderizado

3. Los subcomponentes usan azúcar sintáctico para pasar valores de palabras a los componentes principales

1. Subcomponentes

 Necesita usar eventos para transferir de hijo a padre, deje que emigFun = defineEmits(["handLer"]); Use el azúcar sintáctico defineEmits para crear un evento personalizado, y luego pase el tipo que desea pasar de acuerdo con el evento personalizado (como mostrado a continuación)

   
   
  
  
< plantilla >
<div> _ _
< div @click = "divertido" >
padre del niño
< / div >
< / div >
< / plantilla >

< configuración del guión >
importar { reactivo } de "vue" ;
let em igFun = defineEmits([ "handLer" ] ); // Usa el método sugar sintáctico defineEmits para crear eventos personalizados.
const dat = reactivo([
{
nombre mío: 123 ,
identificación : 1 ,
},
{
nombre mío: 123 ,
identificación : 1 ,
},
{
nombre mío: 123 ,
identificación : 1 ,
},
{
nombre mío: 123 ,
identificación : 1 ,
},
]);
diversión constante = () = > {
emig Fun( "handLer" , dat); // El lado izquierdo es el nombre de su evento personalizado, y el lado derecho son los datos que desea pasar .
};
< / guión >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

2. Componente principal

El componente principal puede usar directamente el evento personalizado creado por su componente secundario, agregar el nombre del evento de su componente principal y obtener con éxito los datos del componente secundario a través de parámetros formales (como se muestra a continuación)

   
   
  
  
< plantilla >
<div> _ _
< Hola @handLer = "mano" / >
<div> _ _
Haga clic para obtener el valor del subcomponente
< / div >
< / div >
< / plantilla >

< configuración del guión >
importar Hola desde "../components/HelloWorld.vue" ;
const mano = (v) = > {
contras ole.log(v);
};
< / guión >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

Mostrar resultados

Resumir

Además, hay algunos problemas con el uso del azúcar sintáctico de configuración. Te lo contaré en el próximo artículo. En segundo lugar, los componentes padre-hijo de Vue se pasan valores entre sí. Es fácil que los novatos se confundan cuando pasándolos de un lado a otro. Aclare sus pensamientos y tómese su tiempo. ¿Qué es mejor? Si tiene alguna idea o idea, comente a continuación.