Petua untuk menggunakan kaedah menyediakan dan menyuntik untuk lulus merentasi komponen dalam Vue

Vue ialah rangka kerja bahagian hadapan sumber terbuka yang sangat baik Ia mempunyai keupayaan untuk membina antara muka pengguna dengan cepat, memudahkan proses pembangunan dan meningkatkan kecekapan pembangunan produk. Vue menyediakan pelbagai cara untuk menghantar data, termasuk prop, emit, $emit, vuex, dsb. Menggunakan menyediakan dan menyuntik pada peringkat komponen ialah cara yang lebih fleksibel yang boleh membantu kami melepasi kaedah dan peristiwa merentas komponen. Dalam artikel ini, kami akan menumpukan pada menerangkan teknik menggunakan menyediakan dan menyuntik dalam Vue untuk menghantar kaedah dan acara merentas komponen.

1. Apakah yang disediakan dan disuntik?

menyediakan dan menyuntik ialah kaedah penghantaran komponen lanjutan dalam Vue, yang membolehkan komponen induk menghantar data kepada komponen turunan yang jauh dari diri mereka sendiri. Kami boleh menjadikan data boleh diakses oleh semua komponen keturunan dengan menyediakannya dalam komponen nenek moyang.

2. Bagaimana untuk menggunakan menyediakan dan menyuntik?

Mari kita gunakan contoh mengikat kaedah yang sama kepada berbilang komponen untuk menerangkan cara menggunakan menyediakan dan menyuntik.

2.1 Komponen nenek moyang menyediakan kaedah

Dalam komponen nenek moyang, kami mentakrifkan kaedah dan memberikannya kepada semua komponen keturunan. Kodnya adalah seperti berikut:

import { provide } from 'vue'

export default {
  created() {
    const commonMethod = () => { alert('hello world') }
    provide('commonMethod', commonMethod)
  }
}

Di sini, kami menggunakan kaedah provide untuk menyediakan kaedah commonMethod kepada semua komponen keturunan. Parameter pertama kaedah menyediakan ialah nama kunci data yang disediakan, dan parameter kedua ialah kandungan khusus data yang disediakan.

2.2 Komponen keturunan menerima kaedah

Selepas menerima kaedah yang disediakan, kita boleh menggunakannya dalam semua komponen keturunan. Kodnya adalah seperti berikut:

import { inject } from 'vue'

export default {
  created() {
    const commonMethod = inject('commonMethod')
    this.$commonMethod = commonMethod
  }
}

Di sini, kami menggunakan kaedah inject untuk menerima kaedah commonMethod. Parameter kaedah suntikan ialah nama kunci data yang disediakan, dan ia akan mengembalikan nilai data yang disediakan. Dalam kitaran hayat yang dicipta, kami mengikat kaedah commonMethod dalam pembolehubah $commonMethod bagi contoh untuk digunakan dalam komponen.

3. Bagaimana untuk melaksanakan acara lulus?

Apabila menyampaikan acara merentas komponen, kami perlu menggunakan menyediakan dan menyuntik. Di bawah ini kami mengambil sebagai contoh peristiwa mengklik butang untuk mencetuskan komponen keturunan.

3.1 Komponen nenek moyang menyediakan acara

Dalam komponen nenek moyang, kami memperkenalkan kelas acara dan menyediakannya kepada semua komponen keturunan. Kodnya adalah seperti berikut:

import { provide } from 'vue'
import { EventEmitter } from 'events'

export default {
  created() {
    const emitter = new EventEmitter()
    provide('emitter', emitter)
  }
}

Di sini, kami mencipta contoh EventEmitter baharu dalam komponen nenek moyang dan memberikannya kepada komponen keturunan.

3.2 Komponen keturunan mendengar peristiwa

Dalam komponen keturunan, kami menggunakan kaedah suntikan untuk mendapatkan acara yang disediakan dan mendengarnya supaya logik yang sepadan dapat dilaksanakan selepas peristiwa itu dicetuskan. Kodnya adalah seperti berikut:

import { inject } from 'vue'

export default {
  created() {
    const emitter = inject('emitter')
    emitter.on('event', () => {
      console.log('emit event')
    })
  }
}

Di sini, kami menggunakan kaedah suntikan untuk menerima pemancar peristiwa yang disediakan dan mendengar 'peristiwa' acara dalam kitaran hayat yang dicipta. Apabila peristiwa dicetuskan, kami melaksanakan logik yang sepadan.

3.3 Peristiwa pencetus

Apabila mencetuskan peristiwa, kita perlu mendapatkan pemancar dan mencetuskannya. Kodnya adalah seperti berikut:

import { inject } from 'vue'

export default {
  methods: {
    emitEvent() {
      const emitter = inject('emitter')
      emitter.emit('event')
    }
  }
}

Di sini, kami menggunakan kaedah suntikan untuk mendapatkan pemancar peristiwa yang disediakan, dan mencetuskan 'peristiwa' dalam kaedah emitEvent.

4. Ringkasan

Melalui pengenalan artikel ini, kami belajar cara menggunakan menyediakan dan menyuntik untuk melaksanakan penyampaian merentas komponen kaedah dan acara. Menggunakan menyediakan dan menyuntik pada peringkat komponen Vue membolehkan kami menghantar data dan acara dengan lebih fleksibel, dengan berkesan mengurangkan kerumitan templat atau prop. Pada masa yang sama, menyediakan dan menyuntik juga menyediakan fungsi yang serupa dengan DI (suntikan kebergantungan), menjadikan reka bentuk seni bina Vue lebih berskala dan boleh diselenggara.

Atas ialah kandungan terperinci Petua untuk menggunakan kaedah menyediakan dan menyuntik untuk lulus merentasi komponen dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!