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:

1. Komponen Ancestor Untuk menyediakan data, sila gunakan pilihan provide

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.

2. Untuk menerima data dalam komponen keturunan, gunakan pilihan suntikan

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

1. menyediakan dan menyuntik hanya boleh menghantar data antara komponen ibu bapa dan anak. Jika anda ingin menghantar data antara komponen adik-beradik, anda boleh mempertimbangkan untuk menggunakan Vuex atau bas acara (EventBus).
2. Apabila menggunakan provide dan inject, perhatikan penamaan nama atribut. Jika nama harta adalah sama, nilai harta yang diterima oleh komponen keturunan akan menjadi nilai harta yang disediakan oleh komponen nenek moyang. Jika nama harta adalah berbeza, nilai harta yang diterima oleh komponen keturunan tidak akan ditentukan.
3. Apabila menggunakan provide and inject, beri perhatian kepada isu jenis data. Data yang disediakan hendaklah menggunakan jenis rujukan seperti objek atau fungsi, bukannya jenis mudah. Ini kerana jenis mudah mencipta ruang memori baharu apabila memberikan nilai, jadi pengubahsuaian pada komponen anak tidak akan menjejaskan nilai komponen induk.

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!