Açúcar sintático do Vue3 Setup, métodos de passagem de vários tipos de dados entre componentes pai e filho

Açúcar sintático do Vue3 Setup, métodos de passagem de vários tipos de dados entre componentes pai e filho

1. O componente pai usa açúcar sintático para passar o tipo de string para o componente filho

        1. Componente pai

msg é o nome da variável personalizada, que é usada para passar para componentes filho, e content são os dados a serem passados ​​para componentes filho de seu componente pai.

   
   
    
    
<modelo>
<div> _ _
< Olá :msg = "conteúdo" />
</div> _ _
</modelo>

< configuração do script >
importar { ref } de "vue" ;
importar Hello de "../components/HelloWorld.vue" ;
const conteúdo = ref ( "É isso" );
</ script >
   
   
    
    

        2. Subcomponentes

No açúcar sintático, você pode escrever diretamente os dados que você passou no método props = defineProps (), e finalmente chamá-lo no template.

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

< configuração do script >
const props = defineProps({
msg : Cadeia de Caracteres ,
});
< / script >
   
   
    
    

 No final, o efeito é assim

2. O componente pai usa açúcar sintático para passar o tipo de array para o componente filho

1. Transferência do componente principal

 DateList no componente é o nome que você declara passar para o subcomponente e ArrayList são os dados que você deseja passar para o subcomponente.

   
   
    
    
<modelo> _ _
<div> _ _
< Olá :DateList = "ArrayList" / >
< / div >
< / modelo >

< configuração do script >
importar { reativo } de "vue" ;
importar Hello de "../components/HelloWorld.vue" ;
const ArrayList = reativo([
{
id : 1 ,
nome : "Extrajudicial" ,
},
{
id : 2 ,
meu nome: "Louco" ,
},
{
id : 3 ,
meu nome: "Zhang San" ,
},
]);
< / script >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

2. Recepção de subcomponentes

No açúcar sintático, você pode escrever diretamente os dados que passou pelo método de props = defineProps() e, finalmente, repetir a saída no modelo e tudo ficará bem

   
   
    
    
<modelo> _ _
<div> _ _
< h 1 > { { props.msg }} < / h 1 >
< div v-for = "(item, index) in props.DateList" : key = "item.id" >
{ { item.name }}
< / div >
< / div >
< / modelo >

< configuração do script >
const props = defineProps({
msg : Cadeia de Caracteres ,
Lista de datas : matriz,
});
console e.log(props.DateList);
< / script >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

efeito de renderização

3. Subcomponentes usam açúcar sintático para passar valores de palavras para componentes pais

1. Subcomponentes

 Você precisa usar eventos para transferir de filho para pai, deixe emigFun = defineEmits(["handLer"]); Use o açúcar sintático defineEmits para criar um evento personalizado e depois passe o tipo que deseja passar de acordo com o evento personalizado (como mostrado abaixo)

   
   
    
    
<modelo> _ _
<div> _ _
< div @click = "diversão" >
pai da criança
< / div >
< / div >
< / modelo >

< configuração do script >
importar { reativo } de "vue" ;
let em igFun = defineEmits([ "handLer" ] ); // Use o método de açúcar sintático defineEmits para criar eventos personalizados.
const dat = reativo([
{
meu nome: 123 ,
id : 1 ,
},
{
meu nome: 123 ,
id : 1 ,
},
{
meu nome: 123 ,
id : 1 ,
},
{
meu nome: 123 ,
id : 1 ,
},
]);
diversão const = () = > {
emig Fun( "handLer" , dat); // O lado esquerdo é o nome do seu evento personalizado e o lado direito são os dados que você deseja passar .
};
< / script >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

2. Componente pai

O componente pai pode usar diretamente o evento personalizado criado por seu componente filho, adicionar o nome do evento de seu componente pai e obter com êxito os dados do componente filho por meio de parâmetros formais (conforme mostrado abaixo)

   
   
    
    
<modelo> _ _
<div> _ _
< Olá @handLer = "mão" / >
<div> _ _
Clique para obter o valor do subcomponente
< / div >
< / div >
< / modelo >

< configuração do script >
importar Hello de "../components/HelloWorld.vue" ;
mão constante = (v) = > {
console.log (v);
};
< / script >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

Mostrar resultados

Resumir

Além disso, existem alguns problemas com o uso do açúcar sintático de configuração. Vou falar sobre isso no próximo artigo. Em segundo lugar, os componentes pai-filho do Vue passam valores um para o outro. É fácil para os novatos ficarem confusos quando passando-os de um lado para o outro. Por favor, esclareça seus pensamentos e não se apresse. O que é melhor? Se você tiver algum insight ou ideia, por favor, comente abaixo.

 

Açúcar sintático do Vue3 Setup, métodos de passagem de vários tipos de dados entre componentes pai e filho

1. O componente pai usa açúcar sintático para passar o tipo de string para o componente filho

        1. Componente pai

msg é o nome da variável personalizada, que é usada para passar para componentes filho, e content são os dados a serem passados ​​para componentes filho de seu componente pai.

   
   
  
  
<modelo>
<div> _ _
< Olá :msg = "conteúdo" />
</div> _ _
</modelo>

< configuração do script >
importar { ref } de "vue" ;
importar Hello de "../components/HelloWorld.vue" ;
const conteúdo = ref ( "É isso" );
</ script >
   
   
  
  

        2. Subcomponentes

No açúcar sintático, você pode escrever diretamente os dados que você passou no método props = defineProps (), e finalmente chamá-lo no template.

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

< configuração do script >
const props = defineProps({
msg : Cadeia de Caracteres ,
});
< / script >
   
   
  
  

 No final, o efeito é assim

2. O componente pai usa açúcar sintático para passar o tipo de array para o componente filho

1. Transferência do componente principal

 DateList no componente é o nome que você declara passar para o subcomponente e ArrayList são os dados que você deseja passar para o subcomponente.

   
   
  
  
<modelo> _ _
<div> _ _
< Olá :DateList = "ArrayList" / >
< / div >
< / modelo >

< configuração do script >
importar { reativo } de "vue" ;
importar Hello de "../components/HelloWorld.vue" ;
const ArrayList = reativo([
{
id : 1 ,
nome : "Extrajudicial" ,
},
{
id : 2 ,
meu nome: "Louco" ,
},
{
id : 3 ,
meu nome: "Zhang San" ,
},
]);
< / script >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

2. Recepção de subcomponentes

No açúcar sintático, você pode escrever diretamente os dados que passou pelo método de props = defineProps() e, finalmente, repetir a saída no modelo e tudo ficará bem

   
   
  
  
<modelo> _ _
<div> _ _
< h 1 > { { props.msg }} < / h 1 >
< div v-for = "(item, index) in props.DateList" : key = "item.id" >
{ { item.name }}
< / div >
< / div >
< / modelo >

< configuração do script >
const props = defineProps({
msg : Cadeia de Caracteres ,
Lista de datas : matriz,
});
console e.log(props.DateList);
< / script >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

efeito de renderização

3. Subcomponentes usam açúcar sintático para passar valores de palavras para componentes pais

1. Subcomponentes

 Você precisa usar eventos para transferir de filho para pai, deixe emigFun = defineEmits(["handLer"]); Use o açúcar sintático defineEmits para criar um evento personalizado e depois passe o tipo que deseja passar de acordo com o evento personalizado (como mostrado abaixo)

   
   
  
  
<modelo> _ _
<div> _ _
< div @click = "diversão" >
pai da criança
< / div >
< / div >
< / modelo >

< configuração do script >
importar { reativo } de "vue" ;
let em igFun = defineEmits([ "handLer" ] ); // Use o método de açúcar sintático defineEmits para criar eventos personalizados.
const dat = reativo([
{
meu nome: 123 ,
id : 1 ,
},
{
meu nome: 123 ,
id : 1 ,
},
{
meu nome: 123 ,
id : 1 ,
},
{
meu nome: 123 ,
id : 1 ,
},
]);
diversão const = () = > {
emig Fun( "handLer" , dat); // O lado esquerdo é o nome do seu evento personalizado e o lado direito são os dados que você deseja passar .
};
< / script >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

2. Componente pai

O componente pai pode usar diretamente o evento personalizado criado por seu componente filho, adicionar o nome do evento de seu componente pai e obter com êxito os dados do componente filho por meio de parâmetros formais (conforme mostrado abaixo)

   
   
  
  
<modelo> _ _
<div> _ _
< Olá @handLer = "mão" / >
<div> _ _
Clique para obter o valor do subcomponente
< / div >
< / div >
< / modelo >

< configuração do script >
importar Hello de "../components/HelloWorld.vue" ;
mão constante = (v) = > {
console.log (v);
};
< / script >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

Mostrar resultados

Resumir

Além disso, existem alguns problemas com o uso do açúcar sintático de configuração. Vou falar sobre isso no próximo artigo. Em segundo lugar, os componentes pai-filho do Vue passam valores um para o outro. É fácil para os novatos ficarem confusos quando passando-os de um lado para o outro. Por favor, esclareça seus pensamentos e não se apresse. O que é melhor? Se você tiver algum insight ou ideia, por favor, comente abaixo.