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

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>

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: '这是一些数据'
}

Di sini kami menyediakan data tidak responsif bernama someData.

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

inject: ['someData'],

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()
}

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'],

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!