Apakah provide & inject dalam Vue dan cara menggunakannya?

Vue.js ialah rangka kerja JavaScript yang sangat popular di dunia bahagian hadapan semasa Ia mempunyai banyak ciri hebat seperti pengikatan data responsif, seni bina paparan komponen, penjejakan kebergantungan dan pemaparan templat. Fungsi yang paling biasa digunakan ialah pengaturcaraan komponen Vue memberikan kami ujian berfungsi seperti pendaftaran komponen, lulus parameter komponen, dll. Walau bagaimanapun, dalam beberapa kes, penghantaran data komponen akan menghadapi masalah yang lebih sukar pada masa ini provide dan inject yang disediakan dalam Vue untuk menyelesaikan masalah jenis ini.

Fahami menyediakan & menyuntik

menyediakan

Vue2.2.0 telah menambah provide / inject, yang boleh membantu kami melengkapkan keperluan pengaturcaraan berorientasikan objek dengan lebih baik. Dalam istilah orang awam, provide ialah proses di mana kami boleh menyediakan data dalam komponen induk, dan kemudian menggunakan inject dalam komponen anak untuk mendapatkan data yang diperlukan.

Berikan contoh untuk lebih memahami provide:

<template>
  <!-- 父组件 -->
  <div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from './child-component';
  export default {
    provide: {
      foo: 'bar'
    },
    components: {
      childComponent
    }
  }
</script>

Dalam komponen induk, kami menyediakan data dengan kunci foo hingga ke komponen anak. Kemudian dalam komponen anak kita boleh mendapatkan data ini melalui inject.

<template>
  <!-- 子组件 -->
  <div>
    <p>我是子组件，我获取到了一个名为"foo"的属性的值：{{foo}}</p>
  </div>
</template>
<script>
  export default {
    inject: ['foo']
  }
</script>

Pada ketika ini, kami telah melaksanakan proses lengkap menyediakan dan menyuntik. Melalui provide kami menyediakan data dalam komponen induk, dan kemudian menggunakan inject dalam komponen anak untuk mendapatkan data, sekali gus melengkapkan pemindahan data antara komponen.

inject

inject ialah tatasusunan di mana nama harta yang hendak disuntik diisytiharkan. Suntikan objek ke dalam subkomponen Nama sifat objek adalah sama dengan nama kunci yang disediakan, dan nilainya ialah data yang disediakan.

Berikan contoh khusus untuk difahami inject:

<!-- 祖先组件: -->
<template>
  <div>
    <div>我是祖先组件</div>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    provide() {
      return { name: 'Colin' }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <div>
    <div>我是父组件</div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from 'view/child-component.vue';
  export default {
    components: {
      childComponent
    }
  }
</script>

<!-- 子组件: -->
<template>
  <div>
    <div>我是子组件</div>
    <p>祖先组件中给我的数据是什么呢？ {{ name }}</p>
  </div>
</template>
<script>
  export default {
    inject: ['name']
  }
</script>

Dalam kod di atas, fungsi provide boleh difahami sebagai komponen induk yang menyediakan data kepada sub-komponen peringkat bawah , dan sub-komponen melepasi inject Untuk menerima data ini, proses penghantaran data direalisasikan.

Senario Penggunaan

Pada ketika ini, anda mungkin bertanya: Kami sudah mempunyai komunikasi prop antara komponen ibu bapa dan anak, mengapa kami memerlukan provide/inject?

Sebenarnya kedua-duanya agak berbeza dari segi senario penggunaan. Berikut ialah beberapa senario di mana provide/inject boleh digunakan untuk melaksanakan komunikasi antara komponen ibu bapa dan anak:

1. Komunikasi antara komponen merentas peringkat

Dalam Vue, komunikasi antara komponen ibu bapa dan anak Ia boleh dicapai melalui prop, tetapi apabila ia melibatkan komponen merentas peringkat, menggunakan prop untuk menghantar data akan menjadi sangat menyusahkan. Pada masa ini, anda boleh menyediakan data dalam komponen nenek moyang melalui provide / inject, dan kemudian mendapatkan data yang diperlukan melalui suntikan dalam komponen keturunan.

2. Komponen induk tidak mengetahui pelaksanaan khusus subkomponen

Dalam sesetengah kes, komponen induk tidak tahu mana yang menyokong data dalaman sub -komponen disimpan dalam. Pada masa ini, data boleh dihantar ke subkomponen melalui provide.

3. Anda boleh menggunakan pemerhati untuk memerhati perubahan dalam nilai untuk membantu melaksanakan penyepaduan komponen

Melalui kaedah provide / inject, kami boleh menyediakan data kepada komponen keturunan, kepada Ibu bapa meninggalkan pintu masuk untuk pemerhatian, dengan itu membolehkan penyepaduan komponen.

4. Apabila tidak sesuai untuk menggunakan prop

Dalam Vue, prop ialah satu-satunya cara rasmi dan mudah digunakan untuk memindahkan data antara ibu bapa dan anak . Tetapi dalam beberapa kes, seperti apabila berbilang subkomponen ingin menggunakan pembolehubah global yang sama dan menyediakan kaedah awam, anda boleh menggunakan kaedah provide / inject.

Ringkasan

Melalui pengenalan artikel ini, kami telah mempelajari tentang penggunaan asas provide / inject yang disediakan dalam Vue, serta senario penggunaannya.

Dalam proses menggunakan provide / inject, kita perlu memberi perhatian kepada tiga perkara:

1. provide / inject digunakan terutamanya untuk pembangunan pemalam mewah dan tidak sesuai untuk pengaturcara yang membangunkan komponen biasa.
2. Pilihan sediakan hendaklah objek atau fungsi yang mengembalikan objek. Objek ini mengandungi sifat yang boleh disuntik ke dalam komponen lain.
3. provide / inject Masalah utama yang diselesaikan ialah pemindahan maklumat antara komponen peringkat merentas, yang sering digunakan dalam pembangunan pemalam.

Akhir sekali, apabila kami menghadapi masalah seperti komunikasi komponen merentas peringkat, kami boleh menggunakan provide / inject untuk menyelesaikan masalah ini memberikan kami kaedah pengaturcaraan yang lebih mudah dan menjadikan kod kami lebih ringkas. , mudah difahami.

Atas ialah kandungan terperinci Apakah provide & inject dalam Vue dan cara menggunakannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!