Rumah > Artikel > hujung hadapan web > Petua untuk menggunakan menyediakan dan menyuntik dalam Vue untuk memindahkan data daripada komponen nenek moyang kepada komponen keturunan
Vue ialah rangka kerja bahagian hadapan yang sangat fleksibel dan berkuasa yang menyediakan banyak fungsi mudah, termasuk menyediakan dan menyuntik. Kedua-dua fungsi ini boleh membantu kami memindahkan data daripada komponen nenek moyang kepada komponen keturunan, yang sangat praktikal. Walau bagaimanapun, menggunakan ciri-ciri ini tidak begitu mudah, terutamanya untuk pemula. Dalam artikel ini, saya akan menerangkan cara menggunakan ciri ini untuk melaksanakan teknik menghantar data daripada komponen nenek moyang kepada komponen keturunan.
Apakah yang disediakan dan disuntik?
Dalam Vue, sediakan dan suntikan ialah sepasang pilihan komponen yang digunakan untuk menghantar data daripada komponen nenek moyang kepada komponen keturunan. Pilihan menyediakan membolehkan komponen nenek moyang menyediakan data kepada semua komponen keturunannya, manakala pilihan suntikan membenarkan komponen keturunan menyuntik data ke dalam komponen nenek moyangnya.
Cara menggunakan provide and inject
Kaedah asas menggunakan provide dan inject adalah seperti berikut:
Gunakan pilihan provide dalam komponen ancestor untuk menyediakan data . Nilai menyediakan mestilah objek Nama harta objek boleh sewenang-wenangnya, tetapi nilai harta mestilah objek data atau fungsi harta yang dikira. Contohnya:
Vue.component('ancestor-component', { provide: { name: 'Alice', age: 20, address: { city: 'Beijing', district: 'Haidian' }, calcSalary: function () { return 10000 } }, // ... })
Dalam contoh ini, kami menggunakan menyediakan untuk menyediakan beberapa item data: nama, umur, alamat dan kiraanGaji. Antaranya, calcSalary ialah fungsi atribut terkira yang mengembalikan hasil pengiraan gaji. Nilai ini tersedia dalam komponen keturunan.
Gunakan pilihan suntikan dalam komponen keturunan untuk menerima data. Nilai pilihan ini ialah tatasusunan atau objek yang mengandungi data daripada pilihan sediakan komponen nenek moyang. Contohnya:
Vue.component('descendant-component', { inject: { name: 'name', age: 'age', address: 'address', calcSalary: 'calcSalary' }, mounted: function () { console.log(this.name) // Alice console.log(this.age) // 20 console.log(this.address.city) // Beijing console.log(this.address.district) // Haidian console.log(this.calcSalary()) // 10000 } })
Dalam contoh ini, kami menggunakan pilihan suntikan untuk menerima data dalam pilihan sediakan komponen moyang. Ambil perhatian bahawa nilai inject ialah objek, kunci objek ialah nama atribut komponen keturunan, dan nilainya ialah nama atribut sepadan yang disediakan oleh komponen nenek moyang. Contohnya, dalam kod di atas, nama sepadan dengan 'nama', umur sepadan dengan 'umur', alamat sepadan dengan 'alamat' dan calcSalary sepadan dengan 'calcSalary'.
Nota
Kesimpulan
Menggunakan menyediakan dan menyuntik dalam Vue memudahkan komponen nenek moyang menghantar data kepada komponen keturunan. Jika anda sedang membangunkan projek Vue yang besar dan perlu membenarkan komponen sumber menghantar data kepada komponen turunan, maka fungsi menyediakan dan menyuntik akan digunakan dengan kerap semasa proses pembangunan projek. Apa yang perlu diberi perhatian ialah langkah berjaga-jaga yang dinyatakan sebelum ini Penggunaan menyediakan dan suntikan yang fleksibel boleh menjadikan projek anda lebih berkualiti dan lebih cekap.
Atas ialah kandungan terperinci Petua untuk menggunakan menyediakan dan menyuntik dalam Vue untuk memindahkan data daripada komponen nenek moyang kepada komponen keturunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!