Bagaimana vue memanggil kaedah dalam komponen merentas peringkat

Sebagai rangka kerja bahagian hadapan yang popular, Vue mempunyai keupayaan pengikatan data dan pembangunan berasaskan komponen yang berkuasa Walau bagaimanapun, dalam projek sebenar, kami sering menghadapi keperluan untuk memanggil kaedah dalam komponen merentas peringkat. Artikel ini akan memperkenalkan cara menggunakan mekanisme komunikasi komponen Vue untuk melaksanakan kaedah panggilan merentas peringkat dalam komponen.

1. Bas acara global

Vue menyediakan bas acara global yang sangat mudah - bas acara. Pusat acara ialah contoh Vue global yang boleh diakses oleh semua komponen dan digunakan untuk komunikasi merentas komponen. Biasanya, kami mencipta pusat acara dalam contoh akar Vue.

1. Buat pusat acara global

Dalam komponen akar, kita boleh menggunakan kaedah "$emit" contoh Vue untuk menghantar acara ke pusat acara, atau kita boleh menggunakan kaedah "$ on" mendengar acara di pusat acara. Berikut ialah kod sampel:

// 在 main.js 中创建事件中心
import Vue from 'vue'

export const EventBus = new Vue()

// 在组件中派发事件
import { EventBus } from './main.js'

EventBus.$emit('my-event', data)

// 在组件中监听事件
import { EventBus } from './main.js'

EventBus.$on('my-event', data => {
  // 处理事件
})

2. Menggunakan pusat acara global untuk memanggil kaedah merentas komponen

Menggunakan pusat acara, kami boleh melaksanakan kaedah panggilan merentas komponen. Dalam komponen A, gunakan kaedah "$emit" untuk menghantar acara ke pusat acara dalam komponen B, gunakan kaedah "$on" untuk mendengar acara, dan kemudian panggil kaedah komponen A. Berikut ialah contoh pelaksanaan:

// 组件A
export default {
  methods: {
    myMethod() {
      console.log('Hello, world!')
    }
  }
}

// 组件B
import { EventBus } from './main.js'

export default {
  mounted() {
    EventBus.$on('my-event', () => {
      this.$refs.componentA.myMethod()
    })
  }
}

Dalam kod di atas, "this.$refs.componentA" mewakili subkomponen bernama "componentA" yang dipasang dalam komponen B. Dengan cara ini, kita boleh Kaedah komponen A dipanggil dalam komponen B.

2. $refs

Selain pusat acara, Vue juga menyediakan cara mudah untuk mengakses contoh komponen - $refs. Ini ialah objek yang mengandungi kejadian semua komponen anak dalam komponen semasa yang merujuk atribut "ref". Kita boleh memanggil kaedah komponen kanak-kanak dengan mengakses objek $refs.

1. Tentukan $ref

Dalam templat, kita boleh merujuk komponen anak dengan mentakrifkan atribut "ref". Berikut ialah contoh pelaksanaan:

// 子组件
<template>
  <div ref="myComponent">Hello, world!</div>
</template>

Dalam kod di atas, kami mentakrifkan "ref" bernama "myComponent" dalam templat komponen anak. "ref" ini boleh diakses dalam komponen induk melalui objek $refs.

2. Gunakan $refs untuk memanggil kaedah dalam komponen

Dalam komponen induk, kita boleh menggunakan objek $refs untuk mengakses kaedah dalam komponen anak. Berikut ialah contoh pelaksanaan:

// 子组件
export default {
  methods: {
    myMethod() {
      console.log('Hello, world!')
    }
  }
}

// 父组件
export default {
  mounted() {
    this.$refs.myComponent.myMethod()
  }
}

Dalam kod di atas, dalam cangkuk yang dipasang bagi komponen induk, kami menggunakan "this.$refs.myComponent" untuk mendapatkan contoh komponen anak dan memanggil kaedah dalamannya .

Ringkasan:

Artikel ini memperkenalkan penggunaan pusat acara dan $refs untuk melaksanakan panggilan merentas peringkat antara komponen Vue. Pusat acara sesuai untuk komunikasi antara komponen bukan ibu bapa dan anak, manakala $refs sesuai untuk komunikasi antara komponen ibu bapa dan anak. Dalam pembangunan sebenar, kami memilih kaedah yang sesuai berdasarkan situasi sebenar untuk mengurus keadaan dan interaksi komponen dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana vue memanggil kaedah dalam komponen merentas peringkat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!