Ralat Vue: Tidak dapat menggunakan menyediakan dan menyuntik dengan betul untuk suntikan pergantungan, bagaimana untuk menyelesaikannya?

Ralat Vue: Tidak dapat menggunakan menyediakan dan menyuntik dengan betul untuk suntikan pergantungan, bagaimana untuk menyelesaikannya?

Semasa proses pembangunan Vue, kita selalunya perlu berkongsi data atau kaedah antara komponen. Vue menyediakan pelbagai cara untuk melaksanakan komunikasi komponen, salah satunya ialah suntikan kebergantungan melalui penyediaan dan suntikan. Walau bagaimanapun, apabila menggunakan menyediakan dan menyuntik untuk suntikan pergantungan, kadangkala kami menghadapi ralat Artikel ini akan membincangkan penyelesaian kepada masalah ini.

1. Mesej ralat

Apabila kami menggunakan menyediakan dalam komponen untuk menyediakan data, dan kemudian menggunakan suntikan dalam subkomponen untuk menerimanya, kadangkala mesej ralat berikut akan muncul:

[Vue warn]: The inject key "xxx" is already provided in xxx

Mesej ralat ini bermakna anda berada dalam komponen yang sama , nama kunci yang sama dibekalkan beberapa kali.

2. Penyelesaian

Apabila kita menemui mesej ralat di atas, kita boleh menyelesaikannya melalui dua kaedah berikut:

Kaedah 1: Semak lokasi menyediakan

Pertama, kami perlu mengesahkan sama ada lokasi menyediakan adalah betul . Pembekal data yang disediakan mestilah komponen induk dan hanya boleh digunakan dalam komponen nenek moyang. Jika lokasi menyediakan adalah salah, seperti menggunakan menyediakan untuk menyediakan data dalam komponen kanak-kanak atau komponen adik-beradik, ralat akan dilaporkan.

Kaedah 2: Elakkan memberikan nama kunci yang sama berulang kali

Dalam komponen yang sama, nama kunci yang sama tidak boleh diberikan beberapa kali. Apabila kami menemui mesej ralat di atas, kami boleh menyelesaikannya dalam dua cara berikut:

2.1 Gunakan nama kunci yang berbeza

Anda boleh menggunakan nama kunci yang berbeza untuk menyediakan data dalam komponen yang menyediakan data. Sebagai contoh, berikut ialah komponen yang menyediakan data:

// 提供数据的组件
export default {
  provide() {
    return {
      foo: 'bar'
    }
  },
  // ...
}

Dalam komponen yang menerima data, nama kunci yang berbeza digunakan untuk menerima:

// 接收数据的组件
export default {
  inject: {
    baz: { from: 'foo' }
  },
  // ...
}

Melalui kaedah di atas, kami mengelak daripada menggunakan nama kunci yang sama dalam komponen yang sama Soalan disediakan beberapa kali.

2.2 Gunakan komponen berfungsi

Komponen fungsi Vue menyediakan cara ringkas untuk melaksanakan suntikan pergantungan, mengelakkan masalah berulang kali memberikan nama kunci yang sama. Dalam komponen berfungsi, anda boleh terus menggunakan menyediakan dan menyuntik untuk suntikan pergantungan tanpa perlu risau tentang memberikan nama kunci berulang kali. Berikut ialah contoh penggunaan komponen berfungsi untuk melaksanakan suntikan kebergantungan:

// 函数式组件
export default Vue.extend({
  functional: true,
  provide() {
    return {
      foo: 'bar'
    }
  },
  inject: ['foo'],
  // ...
})

Dengan kaedah di atas, kami menyelesaikan masalah berulang kali memberikan nama kunci apabila menggunakan menyediakan dan menyuntik untuk suntikan kebergantungan.

Ringkasan:

Dalam Vue, suntikan kebergantungan menggunakan menyediakan dan menyuntik ialah cara komunikasi komponen yang sangat mudah. Walau bagaimanapun, semasa penggunaan, kami kadangkala menghadapi mesej ralat. Artikel ini menggunakan dua kaedah, iaitu menyemak lokasi menyediakan dan mengelakkan berulang kali memberikan nama kunci yang sama, untuk menyelesaikan mesej ralat ini. Saya harap artikel ini dapat membantu anda menyelesaikan masalah semasa menggunakan menyediakan dan menyuntik untuk suntikan pergantungan.

Atas ialah kandungan terperinci Ralat Vue: Tidak dapat menggunakan menyediakan dan menyuntik dengan betul untuk suntikan pergantungan, bagaimana untuk menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!