Artikel untuk bercakap tentang penggunaan menyediakan dan menyuntik dalam Vue

Bagaimana untuk menggunakan menyediakan dan menyuntik dalam Vue? Artikel berikut akan memperkenalkan kepada anda cara menggunakan menyediakan dan menyuntik dalam Vue. Saya harap ia akan membantu anda!

Dalam vue2.0, provide dan inject digunakan dalam komponen dalam bentuk pilihan (konfigurasi) API untuk menyelesaikan masalah silang- A cara komunikasi antara komponen (datuk nenek dan cucu)

ialah komunikasi antara komponen ibu bapa dan anak Komponen induk disenaraikan melalui atribut tersuai, dan komponen anak diterima melalui props lapisan demi lapisan, kaedah ini akan menjadi lebih menyusahkan dan tidak fleksibel

provide dan inject adalah penyelesaiannya: cara menghantar data daripada komponen nenek moyang kepada komponen cucu untuk mencapai pemindahan komponen peringkat silang. daripada data.

Dalam vue3.0, provide dan inject juga disediakan, yang lebih mudah dan lebih mudah untuk digunakan Dari sudut pandangan konseptual semata-mata, ia agak abstrak dan sukar difahami . [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Masih perlu bermula daripada contoh khusus

provide() function

Definisi : Menyediakan nilai yang boleh disuntik oleh komponen turunan

Pelaksanaan: Komponen induk mempunyai provide, pilihan untuk Menyediakan data Terdapat pilihan inject dalam komponen turunan untuk mula menggunakan data yang diluluskan oleh komponen induk

provide(parameter pertama, parameter kedua) , menerima dua parameter , parameter pertama ialah key yang akan disuntik, yang boleh menjadi rentetan atau symbol, dan parameter kedua ialah nilai yang akan disuntik (data khusus untuk dihantar kepada komponen keturunan)

provide disediakan secara rasmi oleh vue componsition API

Kod sampel khusus adalah seperti berikut

import {reactive,provide} from "vue";

let person = reactive({name: 'itclanCoder',website: 'https://coder.itclan.cn'});
provide('person',person);

Hanya berikan nilai melalui provide di atas, kemudian Bagaimana untuk menghantar data ini kepada komponen keturunan, maka anda perlu menggunakan inject

fungsi inject()

definisi : Suntikan nilai yang disediakan oleh komponen nenek moyang (induk) atau keseluruhan aplikasi

Pelaksanaan : Terima nilai yang diluluskan oleh komponen induk (nenek moyang)

: Pertama Dua parameter ialah disuntik inject(第一个参数,第二个参数(可选)) daripada komponen induk (nenek moyang) mereka perlu konsisten key

akan merentasi rantai komponen induk dan menentukan nilai yang disediakan dengan memadankan kekunci If If berbilang rantai komponen memberikan Vue yang sama, maka yang lebih dekat akan menimpa nilai yang disediakan oleh komponen selanjutnya dalam rantai key

jika ia tidak dapat dipadankan dengan

kepada nilai, fungsi key akan kembalikan inject(), melainkan nilai lalai undefined

disediakan Parameter kedua adalah pilihan, iaitu, apabila tiada padanan dengan

, nilai lalai digunakan, yang juga boleh menjadi. fungsi yang mengembalikan beberapa nilai yang lebih rumit untuk dibuat Jika nilai lalai itu sendiri ialah fungsi key

, maka

mesti dihantar sebagai parameter ketiga, menunjukkan bahawa fungsi ini ialah nilai lalai. . Daripada fungsi kilang false

serupa dengan

yang mendaftarkan cangkuk kitaran hayat, API mesti dipanggil serentak dalam fasa inject() komponen setup()

Kod contoh khusus

import {inject,toRefs} from  "vue";

const person = inject('person');
// 若是使用解构,则会丢失响应式,修改数据时,页面不会更新,具体解决,可以引入toRef或toRefs函数
const {name,website} = toRefs(person);

Templat dalam komponen cucu boleh dibaca dan data yang dihantar daripada komponen induk juga menyokong responsif

{{person.name}}---{{person.website}}

Jika pemusnahan digunakan, pembolehubah boleh digunakan terus dalam templat

{{name}}--{{website}}

Jika pemusnahan digunakan, pembolehubah boleh digunakan terus dalam templat

{{name}}--{{website}}

Nota

Jika ia pembolehubah pemusnah, anda mahu data menjadi responsif , maka anda perlu menggunakan

atau toRef() untuk menukar data kepada responsif toRefs()

Berikut ialah contoh lengkap

import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'

// 注入值的默认方式
const foo = inject('foo') 

// 注入响应式的值
const count = inject('count')

// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)

// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')

// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())

// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)

Pada asasnya gunakan cara pertama untuk menyuntik nilai lalai, Penggunaan yang paling biasa adalah untuk menerima nilai lulus yang disediakan oleh komponen induk

Ringkasan

dan provide()inject() (Mempelajari perkongsian video:

Tutorial pengenalan Vuejs

,

Video Pengaturcaraan Asas

)

Atas ialah kandungan terperinci Artikel untuk bercakap tentang penggunaan menyediakan dan menyuntik dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!