Penjelasan mendetail tentang parameter fungsi setup di vue3 - props dan konteks

1. Parameter pertama props dari fungsi setUp

setup(props,context){}

Parameter pertama props:

props adalah objek berisi semua data yang diteruskan oleh komponen induk ke komponen anak.

Gunakan props di komponen anak untuk menerima.

Sebuah objek yang berisi semua properti yang dideklarasikan dan diteruskan dalam konfigurasi

Artinya: jika Anda ingin menampilkan nilai yang diteruskan oleh komponen induk ke komponen anak melalui props.

Anda perlu menggunakan alat peraga untuk menerima konfigurasi. Artinya, props:{......}

Jika Anda tidak menerima konfigurasi melalui Props, nilai outputnya tidak ditentukan

<template>
  <div>
    Komponen induk</div>
  <no-lanjutan :mytitle="pesan" 
      othertitle="Judul lainnya"
      @sonclick="sonclick">
  </tanpa-lanjutan>
</templat>

<skrip>
impor NoCont dari "../components/NoCont.vue"
ekspor bawaan {
  pengaturan () {
    biarkan pesan={
      title:'Data dari komponen induk ke komponen anak'
    }
    fungsi sonclick(msss:string){
      konsol.log(msss)
    }
    kembalikan {pesan,sonclick}
  },
  komponen:{
    Tidak ada Lanjutan
  }
}
</skrip>

<templat>
    <div @click="sonHander">
        Saya adalah data di komponen anak</div>
</templat>

<skrip>
impor {defineComponent,setup } dari 'vue';
ekspor komponen definisi default({
  nama: 'NoCont',
 // Tidak ada penerimaan // alat peraga:{
 // judul saya:{
 // ketik:Objek
 // }
 // },
  penyiapan(alat peraga,konteks){
    console.log('props==>',props.mytitle);//Nilai keluaran tidak ditentukan
    fungsi anakHander(){
        konteks.emit('sonclick','Komponen anak diteruskan ke komponen induk')
    }
    kembali {sonHander}
  }
});
</skrip>

Mengapa nilai keluaran melalui props.mytitle tidak ditentukan?

Karena kami tidak menggunakan alat peraga untuk menerima konfigurasi. Itu adalah

alat peraga:{
    judulku:{
        jenis:Objek
    }
},

jika kita menambahkan konfigurasi penerimaan

2. Penjelasan konteks parameter

Parameter kedua: konteks, adalah sebuah objek.

Ada attrs di dalamnya (objek yang memperoleh semua atribut pada tag saat ini),

tetapi atribut ini adalah semua objek yang tidak dinyatakan diterima di props.

Jika Anda menggunakan props untuk mendapatkan nilai, dan pada saat yang sama Anda mendeklarasikan nilai yang ingin Anda dapatkan di props

: nilai yang diperoleh adalah undefinisi

Catatan:

mendapatkan nilai attrs tidak memerlukan deklarasi di props untuk menerimanya .

Nilai yang diperoleh dari parameter pertama props perlu dideklarasikan di props untuk menerima

distribusi event emit (event ini perlu digunakan saat meneruskannya ke komponen induk)

dan slot slot

<template>
    <div @click="sonHander">
        Saya adalah data di komponen anak</div>
</templat>

<skrip>
impor {defineComponent,setup } dari 'vue';
ekspor komponen definisi default({
  nama: 'NoCont',
  alat peraga:{
      judulku:{
          jenis:Objek
      }
  },
  penyiapan(alat peraga,konteks){
    //Output {judul: nilai yang diteruskan oleh komponen induk}
    console.log('props==>',props.mytitle);
    
    // Keluarkan judul orang lain [gunakan konteks untuk mendapatkan nilainya, tidak perlu menggunakan alat peraga untuk menerimanya]
    console.log('context==> ',context.attrs.othertitle);
    
    // Output tidak terdefinisi, karena konteks tidak perlu menggunakan props untuk menerimanya.
    console.log('contextmytitle==> ',context.attrs.mytitle);
    fungsi anakHander(){
        konteks.emit('sonclick','Komponen anak diteruskan ke komponen induk')
    }
    kembali {sonHander}
  }
});
</skrip>

3. Komponen anak mengirimkan event ke komponen induk

<template>
    <div @click="sonHander">
        Saya adalah data di komponen anak</div>
</templat>

<skrip>
impor {defineComponent,setup } dari 'vue';
ekspor komponen definisi default({
  nama: 'NoCont',
  alat peraga:{
      judulku:{
          jenis:Objek
      }
  },
  penyiapan(alat peraga,konteks){
    fungsi anakHander(){
        konteks.emit('sonclick','Komponen anak diteruskan ke komponen induk')
    }
    kembali {sonHander}
  }
});
</script>

4. Optimalkan pengiriman acara.

Kita tahu bahwa konteks parameter kedua adalah sebuah objek

dan objek tersebut memiliki tiga atribut attrs, slot, dan emit.

Saat mengirimkan acara, boleh saja menggunakan emit secara langsung

<template>
    <div @click="sonHander">
        Saya adalah data di komponen anak</div>
</templat>

<skrip>
impor {defineComponent,setup } dari 'vue';
ekspor komponen definisi default({
  nama: 'NoCont',
  alat peraga:{
      judulku:{
          jenis:Objek
      }
  },
  setup(alat peraga,{attrs,slots,emit}){
    //Gunakan emit secara langsung untuk fungsi pengiriman acara sonHander(){
        emit('sonclick','Komponen anak diteruskan ke komponen induk')
    }
    kembali {sonHander}
  }
});
</script>

5. Dapatkan nilai yang diteruskan oleh komponen induk.

Kita akan menggunakan parameter props untuk mendapatkan nilai

dan attrs untuk mendapatkan nilai

<template>
<jam/>
   <h2>Subkomponen</h2>
    <div @click="sonHander">
        Saya adalah data di komponen anak</div>
    <h2>Menggunakan pernyataan props untuk menerima ==>{{ mytitle }}</h2> 
    <h2>Gunakan parameter attrs untuk mendapatkan ==>{{ attrs.othertitle }}</h2> 
</templat>

<skrip>
impor {defineComponent,setup } dari 'vue';
ekspor komponen definisi default({
  nama: 'NoCont',
  alat peraga:{
      judulku:{
          jenis:Objek
      }
  },
  setup(alat peraga,{attrs,slots,emit}){
    fungsi anakHander(){
        emit('sonclick','Komponen anak diteruskan ke komponen induk')
    }
    kembalikan {sonHander,attrs}
  }
});
</skrip>

Terlampir beberapa hal yang perlu diperhatikan saat menggunakan fungsi setup:

• Waktu eksekusi fungsi setup adalah antara beforeCreate dan create
• . Karena waktu eksekusi setup adalah antara pembuatan, komponen baru saja dibuat, dan data serta metode belum diinisialisasi namun, sehingga tidak dapat Menggunakan data dan metode dalam pengaturan.
• Pengaturan ini menunjuk ke undefinisi
• . Pengaturan hanya dapat sinkron, tidak asinkron.

Di atas adalah penjelasan rinci tentang parameter fungsi pengaturan di vue3 - props dan konteks informasinya, harap perhatikan artikel terkait lainnya di website PHP Cina!