Explicação detalhada dos parâmetros da função de configuração em vue3 - adereços e contexto

1. Os primeiros parâmetros da função setUp

setup(props,context){}

O primeiro parâmetro props:

props é um objeto que contém todos os dados passados ​​pelo componente pai para o componente filho.

Use adereços em componentes filhos para receber.

Um objeto contendo todas as propriedades declaradas e passadas na configuração

. Ou seja: se você deseja gerar o valor passado pelo componente pai para o componente filho por meio de adereços.

Você precisa usar props para receber a configuração. Ou seja, props:{......}

Se você não aceitar a configuração através de Props, o valor de saída será indefinido

<template>
  <div>
    Componente pai</div>
  <no-cont :mytitle="msg" 
      othertitle="Título de outros"
      @sonclick="sonclick">
  </no-cont>
</template>

<roteiro>
importar NoCont de "../components/NoCont.vue"
padrão de exportação {
  configurar () {
    deixe mensagem={
      title:'Dados do componente pai para o componente filho'
    }
    function sonclick(msss:string){
      console.log(msss)
    }
    retornar {msg,sonclick}
  },
  componentes:{
    SemCont
  }
}
</script>

<modelo>
    <div @click="sonHander">
        Eu sou os dados do componente filho</div>
</template>

<roteiro>
importar {defineComponent,setup} de 'vue';
exportar padrão defineComponent({
  nome: 'NoCont',
 // Sem aceitação // adereços:{
 // meutítulo:{
 //tipo:Objeto
 // }
 // },
  setup(adereços,contexto){
    console.log('props==>',props.mytitle);//O valor de saída é indefinido
    função filhoHander(){
        context.emit('sonclick','O componente filho é passado para o componente pai')
    }
    retornar {sonHander}
  }
});
</script>

Por que o valor gerado por props.mytitle é indefinido?

Porque não usamos props para receber configuração. Isso é

adereços:{
    meutítulo:{
        tipo:Objeto
    }
},

se adicionarmos a configuração de aceitação

2. Explicação do contexto do parâmetro

O segundo parâmetro: contexto, é um objeto.

Há attrs dentro (um objeto que obtém todos os atributos da tag atual),

mas esse atributo são todos os objetos que não são declarados para serem recebidos em props.

Se você usar props para obter o valor e ao mesmo tempo declarar o valor que deseja obter nos props

: o valor obtido é indefinido

Nota:

obter o valor de attrs não requer nenhuma declaração nos props para recebê-lo. .

O valor obtido pelo primeiro parâmetro props precisa ser declarado nas props para receber

a distribuição do evento emit (este evento precisa ser usado ao passar para o componente pai)

e no slot slot

<template>
    <div @click="sonHander">
        Eu sou os dados do componente filho</div>
</template>

<roteiro>
importar {defineComponent,setup} de 'vue';
exportar padrão defineComponent({
  nome: 'NoCont',
  adereços:{
      meutítulo:{
          tipo:Objeto
      }
  },
  setup(adereços,contexto){
    //Saída {título: valor passado pelo componente pai}
    console.log('props==>',props.meutítulo);
    
    // Produz os títulos de outras pessoas [use o contexto para obter o valor, não há necessidade de usar adereços para aceitar]
    console.log('context==> ',context.attrs.othertitle);
    
    // Saída indefinida, porque o contexto não precisa usar props para aceitar.
    console.log('contextmytitle==> ',context.attrs.mytitle);
    função filhoHander(){
        context.emit('sonclick','O componente filho é passado para o componente pai')
    }
    retornar {sonHander}
  }
});
</script>

3. O componente filho despacha eventos para o componente pai

<modelo>
    <div @click="sonHander">
        Eu sou os dados do componente filho</div>
</template>

<roteiro>
importar {defineComponent,setup} de 'vue';
exportar padrão defineComponent({
  nome: 'NoCont',
  adereços:{
      meutítulo:{
          tipo:Objeto
      }
  },
  setup(adereços,contexto){
    função filhoHander(){
        context.emit('sonclick','O componente filho é passado para o componente pai')
    }
    retornar {sonHander}
  }
});
</script>

4. Otimize o envio de eventos

Sabemos que o segundo parâmetro context é um objeto

e o objeto tem três atributos attrs, slots e emit

Ao despachar eventos, não há problema em usar emit diretamente

<template>.
    <div @click="sonHander">
        Eu sou os dados do componente filho</div>
</template>

<roteiro>
importar {defineComponent,setup} de 'vue';
exportar padrão defineComponent({
  nome: 'NoCont',
  adereços:{
      meutítulo:{
          tipo:Objeto
      }
  },
  setup(adereços,{atributos,slots,emit}){
    //Use emit diretamente para a função de envio de eventos sonHander(){
        emit('sonclick','O componente filho é passado para o componente pai')
    }
    retornar {sonHander}
  }
});
</script>

5. Obtenha o valor passado pelo componente pai

Usaremos o parâmetro props para obter o valor

e attrs para obter o valor

<template>.
<h/>
   <h2>Subcomponente</h2>
    <div @click="sonHander">
        Eu sou os dados do componente filho</div>
    <h2>Instrução props usada para receber ==>{{ mytitle }}</h2> 
    <h2>Use o parâmetro attrs para obter ==>{{ attrs.othertitle }}</h2> 
</template>

<roteiro>
importar {defineComponent,setup} de 'vue';
exportar padrão defineComponent({
  nome: 'NoCont',
  adereços:{
      meutítulo:{
          tipo:Objeto
      }
  },
  setup(adereços,{atributos,slots,emit}){
    função filhoHander(){
        emit('sonclick','O componente filho é passado para o componente pai')
    }
    return {sonHander,attrs}
  }
});
</script>

Em anexo estão vários pontos a serem observados ao usar a função setup:

• O tempo de execução da função setup está entre beforeCreate ecreate
• Como o tempo de execução da configuração está entre criado, o componente acabou de ser criado e os dados e métodos não foram inicializados. ainda, portanto, não pode usar dados e métodos na configuração.
• Isso na configuração aponta para indefinido
• . A configuração só pode ser síncrona, não assíncrona

. informações, preste atenção a outros artigos relacionados no site PHP chinês!