Kaedah antara komponen vue memanggil satu sama lain

Dalam pembangunan komponen Vue, komponen boleh disarangkan antara satu sama lain, dan komponen dengan struktur berbeza selalunya perlu memanggil kaedah satu sama lain. Maksudnya, anda perlu melaksanakan kaedah di dalam komponen untuk memanggil kaedah dalam komponen lain. Seterusnya, mari kita perkenalkan cara kaedah antara komponen Vue memanggil satu sama lain.

1. Melalui komponen induk

Dalam pembangunan komponen Vue, setiap komponen mempunyai komponen induknya sendiri, dan komponen boleh memanggil satu sama lain. Kita boleh menentukan kaedah dalam komponen induk dan kemudian memanggil kaedah dalam komponen induk melalui $parent dalam komponen anak.

Mula-mula tentukan kaedah dalam komponen induk:

methods:{
  changeMsg:function(){
     this.msg='hello world';
  }
}

Kemudian gunakan ini.$parent.changeMsg() dalam komponen anak untuk memanggil kaedah dalam komponen induk.

2. Rujukan melalui komponen

Dalam pembangunan berasaskan komponen Vue, subkomponen boleh memperkenalkan komponen lain melalui import, dan terus memanggil kaedah memperkenalkan komponen dalam subkomponen.

Katakan kita ingin memanggil kaedah komponen B dalam komponen A. Pertama, komponen B mesti dimasukkan ke dalam komponen A, seperti yang ditunjukkan di bawah:

import B from '../B.vue'
export default {
  components: {
    B
  },...

}

Kemudian ia boleh digunakan terus dalam komponen A. this.$refs untuk mendapatkan contoh komponen B, dan kemudian panggil kaedah dalam komponen B.

this.$refs.b.test();

3. Melalui Vuex

Vuex ialah perpustakaan pengurusan negeri dalam Vue yang boleh mengurus keadaan global dengan mudah. Kami boleh mentakrifkan kaedah global dalam Vuex dan memanggil kaedah Vuex global melalui $store.dispatch dalam komponen.

Mula-mula kita perlu mentakrifkan kaedah dalam Vuex:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    msg:'hello',
  },
  mutations: {
    changeMsg(state){
      state.msg='hello world';
    }
  },
  actions:{
    changeMsg({commit}){
      commit('changeMsg');
    }
  }
})

export default store;

Kemudian gunakan kod berikut dalam komponen untuk memanggil kaedah dalam Vuex:

this.$store.dispatch('changeMsg');

4. Melalui acara bas

Dalam Vue, kita boleh mencapai komunikasi antara komponen melalui bas acara. Pendekatan ini mengedarkan peristiwa ke pelbagai bahagian aplikasi dan membolehkan kami menghantar data antara komponen.

Kami boleh mencipta tika Vue kosong sebagai bas acara, dan kemudian memanggil bas acara dalam komponen untuk mencetuskan acara.

Mula-mula buat contoh Vue dalam main.js sebagai bas acara:

Vue.prototype.$bus = new Vue()

Kemudian dalam komponen anda boleh menggunakan kod berikut untuk mencetuskan acara:

 this.$bus.$emit('EVENT_NAME', data)

Akhir sekali dalam satu lagi Kod berikut boleh digunakan dalam komponen untuk menerima acara:

this.$bus.$on('EVENT_NAME', data => {
    // handle event
})

Melalui empat kaedah di atas, kami boleh melaksanakan kaedah antara komponen Vue untuk memanggil satu sama lain. Dalam aplikasi sebenar, kita boleh memilih kaedah yang paling sesuai dengan keperluan kita untuk melaksanakan panggilan kaedah antara komponen.

Atas ialah kandungan terperinci Kaedah antara komponen vue memanggil satu sama lain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!