Bermula dengan VUE3 untuk Pemula: Menggunakan provide/inject untuk berkongsi antara komponen

VUE ialah rangka kerja bahagian hadapan moden dengan kelebihan kemudahan penggunaan yang tinggi, fleksibiliti yang kuat dan prestasi yang cemerlang Ia semakin popular dan digemari oleh pembangun bahagian hadapan. Versi VUE3 membawa prestasi yang lebih baik, reka bentuk seni bina yang lebih baik dan lebih mesra pengguna. VUE3 menyediakan cara baharu untuk berkongsi data antara komponen - sediakan/suntik. Artikel ini akan memperkenalkan proses penggunaan dan pelaksanaan menyediakan/menyuntik secara terperinci.

Ikhtisar

provide/inject ialah kaedah yang disyorkan secara rasmi oleh VUE3 untuk berkongsi data antara komponen. Dalam VUE2, kami sering melaksanakan komunikasi data antara komponen melalui props/$emit dan Vuex. Ciri terbesar menyediakan/menyuntik ialah ia melaksanakan perkongsian data dengan cara yang lebih tersirat, menjadikan kod lebih mudah dibaca dan diselenggara.

Penggunaan provide/inject

Penggunaan provide/inject sangat mudah, berikut adalah beberapa contoh:

Komponen induk menyediakan data

rreee

Dalam Dalam komponen induk, kami menyediakan data bernama mesej melalui kaedah menyediakan dan menetapkan nilainya kepada 'Hello daripada ibu bapa'. Kemudian, kita boleh menggunakan inject dalam sub-komponen untuk mendapatkan data ini:

<template>
  <child-component />
</template>

<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    provide('message', 'Hello from parent')
  }
}
</script>

Dalam sub-komponen, kita menggunakan kaedah inject untuk mendapatkan data bernama mesej Pada masa ini kita boleh menggunakan data ini templat itu.

Komponen anak menyediakan data

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

Dalam contoh ini, kami mentakrifkan data reaktif bernama mesej dalam komponen induk dan menetapkan nilainya kepada 'Hello daripada ibu bapa'. Kami kemudian memberikan data ini kepada komponen kanak-kanak melalui kaedah menyediakan. Dalam komponen anak, kami memperoleh mesej melalui kaedah suntikan dan menggunakannya dalam templat:

<template>
  <child-component />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const message = ref('Hello from parent')
    return { message }
  },
  provide: {
    message: this.message
  }
}
</script>

Perhatikan bahawa data mesej yang kami tentukan di sini adalah responsif.

Proses pelaksanaan provide/inject

Pelaksanaan provide/inject bergantung pada sistem respons baharu dalam VUE3. Dalam VUE3, sediakan / suntikan bergantung pada provideParent / injectSetupRef untuk berfungsi. Fungsi provideParent adalah serupa dengan kaedah provide, kedua-duanya menerima nama kunci dan nilai data, manakala injectSetupRef digunakan untuk mendapatkan data daripada komponen induk. Proses pelaksanaan khusus adalah seperti berikut:

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

Dalam fungsi provide, kami memperoleh tika semasa melalui fungsi getCurrentInstance dan menyimpan data yang disediakan pada objek yang menyediakan tika semasa. Jika kejadian semasa tidak wujud, ini bermakna fungsi menyediakan tidak dipanggil dalam fungsi persediaan dan mesej amaran dikembalikan.

Dalam fungsi inject, kami juga memperoleh tika semasa melalui fungsi getCurrentInstance, dan mendapatkan nilai yang sepadan dengan kunci daripada objek menyediakan komponen induknya. Jika nilai yang sepadan dengan kunci tidak wujud, defaultValue dikembalikan. Jika kejadian semasa tidak wujud, ini bermakna fungsi suntikan belum dipanggil dalam fungsi persediaan atau komponen berfungsi, dan mesej amaran akan dikembalikan.

Ringkasan

Melalui pengenalan artikel ini, kita dapat mengetahui bahawa provide/inject ialah kaedah yang sangat baik untuk berkongsi data antara komponen VUE3. Ia melaksanakan perkongsian data dengan cara yang lebih tersirat, menjadikan kod lebih mudah dibaca dan diselenggara. Semasa penggunaan, sila ambil perhatian bahawa data yang disediakan adalah responsif dan boleh digunakan dalam komponen bersarang. Pada masa yang sama, perlu diperhatikan bahawa jika data yang kami sediakan tidak wujud dalam menyediakan, parameter yang diluluskan dalam argumen[1] akan digunakan sebagai nilai lalai Pada masa ini, anda perlu sentiasa memberi perhatian kepada jenis dan nilai parameter.

Atas ialah kandungan terperinci Bermula dengan VUE3 untuk Pemula: Menggunakan provide/inject untuk berkongsi antara komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!