Rumah > hujung hadapan web > View.js > Cara menggunakan provide/inject dalam Vue untuk melaksanakan pemindahan data tidak responsif antara komponen nenek moyang dan komponen keturunan

Cara menggunakan provide/inject dalam Vue untuk melaksanakan pemindahan data tidak responsif antara komponen nenek moyang dan komponen keturunan

王林
Lepaskan: 2023-06-11 10:35:12
asal
1587 orang telah melayarinya

Vue menyediakan dua API peringkat tinggi: menyediakan dan menyuntik, yang boleh membantu pembangun melakukan pemindahan data tidak responsif antara komponen nenek moyang dan komponen keturunan. Data ini bukan sahaja nilai primitif, tatasusunan dan objek, tetapi juga fungsi dan kelas.

Dalam Vue, pemindahan data antara komponen secara amnya dibahagikan kepada dua jenis: pemindahan data responsif antara komponen ibu bapa dan anak dan antara komponen adik-beradik. Walau bagaimanapun, kadangkala kita perlu menghantar beberapa data yang tidak responsif antara nenek moyang dan keturunan Pada masa ini, penggunaan provide/inject menjadi perlu.

provide dan inject diperkenalkan dalam Vue2.2.0 untuk menyelesaikan masalah pemindahan data antara komponen merentas peringkat. Sebelum ini, jika kami ingin memindahkan data antara komponen induk dan komponen anak, kami biasanya melaksanakannya melalui prop dan acara. Walau bagaimanapun, jika kita memerlukan pemindahan data tidak responsif antara komponen nenek moyang dan komponen keturunan, prop dan acara tidak sesuai Pada masa ini, kita perlu menggunakan menyediakan dan menyuntik.

Sekarang, mari kita lihat contoh:

<grand-parent>
    <parent>
        <child></child>
    </parent>
</grand-parent>
Salin selepas log masuk

Dalam contoh ini, datuk nenek ialah komponen moyang, ibu bapa ialah komponen anak, dan anak ialah komponen keturunan. Kami boleh menggunakan menyediakan untuk menyediakan beberapa data dalam datuk nenek, dan kemudian menggunakan suntikan dalam kanak-kanak untuk mengakses data ini.

Pertama, kami perlu menyediakan data menggunakan provide dalam komponen grand-parent:

provide: {
    someData: '这是一些数据'
}
Salin selepas log masuk

Di sini kami menyediakan data tidak responsif bernama someData.

Kemudian, gunakan inject dalam komponen kanak-kanak untuk mengakses data ini:

inject: ['someData'],
Salin selepas log masuk

Di sini kami menggunakan suntikan untuk menyuntik beberapa dataData, supaya kami boleh mengakses beberapaData dalam komponen kanak-kanak.

Selain jenis data ringkas, kami juga boleh menggunakan provide untuk menyediakan beberapa fungsi dan kelas:

provide: {
    someMethod: this.doSomething,
    someClass: new MyClass()
}
Salin selepas log masuk

Dalam contoh ini, kami bukan sahaja menyediakan kaedah, tetapi juga Contoh kelas. Dalam komponen keturunan, kami boleh menggunakan inject untuk mengakses data ini:

inject: ['someMethod', 'someClass'],
Salin selepas log masuk

Di sini kami menggunakan inject untuk menyuntik someMethod dan someClass supaya kami boleh mengakses data ini dalam komponen keturunan.

Perlu diambil perhatian bahawa memandangkan penyediaan dan suntikan tidak responsif, perubahan data tidak akan didengari. Jika kita perlu melakukan pemindahan data responsif, kita harus menggunakan prop dan acara.

Ringkasnya, menyediakan dan menyuntik adalah API yang sangat berguna dalam Vue, yang boleh membantu kami melakukan pemindahan data tidak responsif antara nenek moyang dan keturunan. Menyediakan dan menyuntik adalah pilihan yang baik apabila kita perlu menghantar beberapa data tidak responsif.

Atas ialah kandungan terperinci Cara menggunakan provide/inject dalam Vue untuk melaksanakan pemindahan data tidak responsif antara komponen nenek moyang dan komponen keturunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan