Rumah > hujung hadapan web > View.js > Bermula dengan VUE3 untuk Pemula: Menggunakan provide/inject untuk berkongsi antara komponen

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

WBOY
Lepaskan: 2023-06-16 08:34:36
asal
1705 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan