Cara menggunakan provide/inject dalam Vue untuk menghantar data merentasi berbilang lapisan nenek moyang dan keturunan

Vue menyediakan kaedah pemindahan data yang cekap - menyediakan/menyuntik, yang boleh membantu kami memindahkan data antara nenek moyang dan keturunan merentas berbilang lapisan, mengelakkan pemindahan prop yang menyusahkan. Artikel ini akan memperkenalkan cara menggunakan provide/inject dalam Vue untuk mencapai pemindahan data merentas berbilang lapisan nenek moyang dan keturunan.

1. Menyediakan dan menyuntik

Menyediakan dan menyuntik ialah API baharu selepas Vue versi 2.2.0, yang digunakan untuk memindahkan data merentas komponen berbilang lapisan. provide membolehkan komponen menyuntik kebergantungan ke dalam semua komponen turunannya, dan suntikan boleh menerima kebergantungan ini dan menggunakannya.

menyediakan dan menyuntik digunakan terutamanya untuk perpustakaan pemalam/komponen pesanan tinggi, seperti element-ui. Dalam elemen-ui, komponennya semua bergantung pada perpustakaan komponen peringkat teratas ini perlu menyediakan beberapa pembolehubah awam dan kaedah kepada semua sub-komponen yang digunakan untuk memindahkan data ini.

2. Penggunaan menyediakan dan menyuntik

Menggunakan menyediakan dalam komponen, kami boleh menyediakan titik suntikan untuk komponen kanak-kanak supaya mereka boleh mendapatkan data yang disediakan oleh komponen induk. Contohnya:

// 父组件
export default {
  provide () {
    return {
      theme: this.theme
    }
  },
  data () {
    return {
      theme: 'light'
    }
  }
}

// 子组件
export default {
  inject: ['theme'],
  mounted () {
    console.log(this.theme) // light
  }
}

Dalam contoh di atas, komponen induk menggunakan menyediakan untuk menyediakan data dan mendedahkan objek data kepada komponen turunan Data di sini ialah jenis rentetan. Cara untuk menyediakan adalah dengan menggunakan fungsi menyediakan Menurut dokumentasi rasmi menyediakan, nilai pulangan fungsi ini adalah objek. Kunci dalam objek boleh digunakan apabila menyuntik keturunan, dan nilainya ialah data yang akan disuntik, yang boleh menjadi pembolehubah, fungsi, dsb.

Menggunakan suntikan dalam komponen anak, kami boleh menerima data yang disediakan oleh komponen induk. Contohnya:

export default {
  inject: ['theme'],
  mounted () {
    console.log(this.theme) // light
  }
}

Dalam contoh, komponen anak menerima data menggunakan pilihan suntikan dalam pilihan komponen. "inject: [key]" dengan kunci ialah kunci objek data yang akan didedahkan dalam komponen induk. Kunci di sini adalah konsisten dengan yang disediakan oleh fungsi provide. Perlu diingat bahawa secara lalai, kebergantungan akan dicari dalam induk Jika anda tidak mahu mencari dalam induk, anda perlu menetapkan srcoll dalam inject kepada false. Hanya data yang disediakan oleh komponen induk boleh disuntik oleh komponen anak.

3. Nota tentang menyediakan dan menyuntik

1. Data yang disuntik oleh menyediakan boleh digunakan dalam komponen turunan, tetapi tidak dalam komponen induknya.

Dalam mekanisme menyediakan dan menyuntik, data yang disediakan oleh menyediakan boleh disuntik ke dalam komponen turunan secara suntikan. Walau bagaimanapun, jika inject juga digunakan dalam komponen induk untuk menerima data, ia tidak akan berkuat kuasa kerana inject akan mencari data yang disediakan dalam komponen induk secara lalai dan Vue tidak akan melihat dalam komponen induk untuk konsisten dengan keturunan. komponen.

2. Jangan gunakan fungsi anak panah dalam menyediakan untuk mengembalikan data.

menyediakan keperluan untuk mengembalikan objek untuk menyediakan data, jadi kami sering menggunakan fungsi anak panah untuk mengembalikan objek, contohnya:

export default {
  provide: () => ({
    theme: 'light'
  })
}

Walau bagaimanapun, dalam kebanyakan kes kami tidak menggunakan anak panah berfungsi untuk menyediakan data, kerana fungsi anak panah tidak menunjuk kepada ini. Apabila menggunakan fungsi anak panah dalam menyediakan ia tidak mendapat konteks yang betul dan ia tidak bertindak balas terhadap perubahan data.

3. Tidak disyorkan untuk menggunakan nama bermula dengan simbol $ dalam menyediakan dan menyuntik.

Penamaan bermula dengan simbol $ dalam provide dan inject ialah peraturan penamaan yang dikhaskan oleh Vue, jadi kami tidak mengesyorkan menggunakan simbol $ untuk memulakan data yang disediakan. Menggunakan nama bermula dengan simbol $ dalam menyediakan mungkin menyebabkan beberapa masalah, manakala menggunakan nama bermula dengan simbol $ dalam inject akan diabaikan.

4. Senario penggunaan

Tujuan utama menyediakan/menyuntik adalah untuk membina perpustakaan komponen merentas peringkat komponen. Khususnya, berbilang komponen berkongsi beberapa maklumat atau status yang sama, seperti warna tema, bahasa, dsb.

Dalam proses pembangunan sebenar, senario boleh dibayangkan dengan mudah: dalam Apl atau halaman, mungkin terdapat banyak komponen yang serupa. Komponen ini perlu menggunakan keadaan atau kaedah yang sama untuk menyampaikan maklumat dan status yang dikongsi ini merentas peringkat, mengelakkan kod berlebihan dan pertindihan kerja.

Pada masa yang sama, kami juga boleh menggunakan campuran untuk mengelakkan pertindihan kod dan lebihan kod, menjadikan kod kami elegan, bersih dan mudah diselenggara.

5. Ringkasan

Menggunakan provide/inject ialah kaedah pemindahan data yang cekap, yang boleh membantu kami mencapai pemindahan data merentas berbilang lapisan nenek moyang dan keturunan, serta mengurangkan penggunaan prop. Walau bagaimanapun, perlu diingatkan bahawa terdapat beberapa langkah berjaga-jaga yang perlu diikuti apabila menggunakan sediakan/suntik untuk mengelakkan menjejaskan prestasi dan ketepatan komponen. Pada masa yang sama, aplikasi sebenar memerlukan analisis terperinci senario dan penggunaan munasabah menyediakan/menyuntik, props atau vuex untuk pemindahan data.

Atas ialah kandungan terperinci Cara menggunakan provide/inject dalam Vue untuk menghantar data merentasi berbilang lapisan nenek moyang dan keturunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!