Cara menggunakan provide/inject dalam Vue untuk melaksanakan pemindahan kaedah antara komponen nenek moyang dan komponen keturunan

Vue, sebagai rangka kerja bahagian hadapan yang popular, menyediakan pelbagai kaedah untuk mengatur dan mengurus interaksi antara komponen. Dalam Vue, menyediakan dan menyuntik adalah dua kaedah yang boleh digunakan untuk melaksanakan pemindahan kaedah antara komponen nenek moyang dan komponen keturunan.

menyediakan dan menyuntik ialah kaedah untuk komunikasi antara komponen lanjutan yang disediakan oleh Vue Fungsi mereka adalah untuk menyediakan data kepada komponen nenek moyang, dan kemudian menggunakan kaedah suntikan untuk menerima data dalam komponen turunan.

1. Definisi menyediakan dan menyuntik

Memberi dan menyuntik ialah ciri baharu dalam Vue.js 2.2.0+ ia adalah alternatif untuk komunikasi antara komponen ibu bapa dan anak.

Pilihan sediakan boleh menjadi objek atau fungsi yang mengembalikan objek dan peranannya adalah untuk menentukan data yang anda berikan. Pilihan suntikan boleh menjadi tatasusunan atau objek, di mana ahli tatasusunan ialah rentetan, mewakili harta yang anda perlukan untuk menyuntik Kekunci ahli objek mewakili nama pengikatan tempatan, dan nilai kunci ialah kunci yang disediakan oleh komponen induknya.

2. Senario penggunaan menyediakan dan menyuntik

Menggunakan menyediakan dan menyuntik boleh digunakan dalam senario berikut:

• Komunikasi antara komponen bersarang berbilang peringkat; 🎜>
Komponen nenek moyang boleh menghantar data dan kaedah kepada komponen keturunan;
• Elakkan menggunakan pengurusan keadaan mudah vuex.

Menggunakan vuex boleh mengurus status global dan menyelesaikan masalah pengurusan status antara berbilang komponen Walau bagaimanapun, untuk senario pengurusan status yang mudah, lebih mudah dan lebih berkesan untuk menggunakan kaedah komunikasi menyediakan dan menyuntik.

3. Pelaksanaan menyediakan dan menyuntik

Berikut adalah contoh untuk memperkenalkan pelaksanaan menyediakan dan menyuntik:

Dalam komponen induk App.vue, Gunakan kaedah provide untuk menyediakan kaedah setData:

1. <template>
     <div>
       <child-comp :setData="setData"></child-comp>
     </div>
   </template>
   
   <script>
   import ChildComp from './ChildComp.vue';
   
   export default {
     components: {
       ChildComp
     },
     provide() {
       return {
         setData: this.setData
       }
     },
     data() {
       return {
         text: 'Hello World'
       }
     },
     methods: {
       setData() {
         this.text = 'Vue.js is awesome';
       }
     }
   }
   </script>

Dalam komponen anak ChildComp.vue, gunakan kaedah inject untuk menerima kaedah setData dan panggil kaedah setData dalam komponen:

<template>
  <div>
    <button @click="setData()">修改文本</button>
  </div>
</template>

<script>
export default {
  inject: ['setData']
}
</script>

Klik butang dalam komponen anak dan tukar atribut teks dalam komponen induk dengan memanggil kaedah setData yang disediakan oleh komponen induk.

4 Perkara yang perlu diberi perhatian tentang menyediakan dan menyuntik

Walaupun menggunakan menyediakan dan menyuntik adalah mudah dan mudah, anda perlu memberi perhatian kepada perkara berikut:

menyediakan dan menyuntik Ia tidak responsif Apabila data yang disediakan oleh komponen induk berubah, komponen anak tidak akan dikemas kini secara automatik
• Anda perlu memberi perhatian kepada konflik penamaan antara menyediakan dan menyuntik untuk mencegah menamakan konflik daripada menyebabkan ralat pemindahan data;
• Atribut yang disuntik dengan menyediakan dan menyuntik dalam nenek moyang yang berbeza adalah berbeza, jadi anda perlu memberi perhatian kepada sumber atribut.

5. Ringkasan

Artikel ini memperkenalkan cara menggunakan menyediakan dan menyuntik dalam Vue untuk melaksanakan pemindahan kaedah antara komponen nenek moyang dan komponen keturunan. Menggunakan menyediakan dan menyuntik boleh mencapai komunikasi komponen yang mudah, elakkan menggunakan pengurusan keadaan mudah vuex, dan meningkatkan kecekapan pembangunan. Walau bagaimanapun, anda perlu ambil perhatian bahawa menyediakan dan menyuntik tidak responsif, dan anda perlu memberi perhatian kepada konflik penamaan antara menyediakan dan menyuntik.

Atas ialah kandungan terperinci Cara menggunakan provide/inject dalam Vue untuk melaksanakan pemindahan kaedah antara komponen nenek moyang dan komponen keturunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!