Beberapa cara untuk memanggil kaedah antara berbilang fail Vue

Dalam pembangunan Vue, kami biasanya menggunakan komponen fail tunggal (fail .vue) untuk pembangunan, memisahkan komponen untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Tetapi apabila memanggil kaedah antara berbilang komponen fail tunggal, beberapa masalah mungkin timbul. Artikel ini akan memperkenalkan beberapa cara untuk memanggil kaedah antara berbilang fail dalam Vue.

1. Gunakan Mixin (Mixin)

Mixin ialah kaedah yang sangat mudah yang disediakan oleh Vue, yang boleh merangkum beberapa kod biasa dan berkongsi antara berbilang komponen. Kita boleh menulis kaedah yang perlu dikongsi dalam Mixin dan memperkenalkan Mixin ini ke dalam komponen yang perlu menggunakan kaedah ini.

Sebagai contoh, kami mempunyai fail Mixin mixin.js, yang mengandungi kaedah showMsg:

export default {
  methods: {
    showMsg() {
      console.log('hello world')
    }
  }
}

Kami hanya perlu memperkenalkan mixin.js ke dalam komponen yang menggunakan kaedah showMsg.

import mixin from './mixin.js'

export default {
  mixins: [mixin],
  ...
}

Dalam kod di atas, kami memperkenalkan kod dalam mixin.js menggunakan atribut mixins dan menambahkannya pada komponen.

Dengan cara ini, anda boleh menggunakan kaedah showMsg dalam komponen.

this.showMsg()

2. Gunakan ini.$refs

Apabila kita mentakrifkan komponen dalam Vue, kita boleh menetapkan atribut ref kepadanya dan kita boleh merujuk contoh komponen ini dalam komponen. Rujukan ini boleh digunakan untuk memanggil kaedah komponen semasa.

Sebagai contoh, kita mempunyai dua komponen, komponen A dan komponen B. Komponen A memanggil kaedah dalam komponen B. Ini boleh dicapai melalui langkah berikut:

1. Tetapkan ref atribut dalam komponen B.

<template>
  <div>
    组件B
  </div>
</template>

<script>
export default {
  methods: {
    methodOfB() {
      console.log('methodOfB')
    }
  }
}
</script>

<template>
  <div>
    <component-b ref="b"></component-b>
  </div>
</template>

<script>
import ComponentB from './ComponentB.vue'

export default {
  components: {ComponentB},
  methods: {
    methodOfA(){
      this.$refs.b.methodOfB()
    }
  }
}
</script>

Menggunakan ini.$refs.b dalam kaedah dalam komponen A boleh mendapatkan contoh komponen B, dengan itu menggunakan kaedah komponen B.

3. Gunakan vuex

Vuex ialah alat pengurusan negeri yang disediakan secara rasmi oleh Vue. Sangat mudah untuk berkongsi data antara berbilang komponen. Selain itu, kami juga boleh mentakrifkan beberapa kaedah awam dalam Vuex untuk digunakan oleh berbilang komponen.

Sebagai contoh, kami mempunyai fail store.js di mana kaedah awam ditakrifkan:

export default new Vuex.Store({
  state: {...},
  mutations: {...},
  actions: {...},
  getters: {...},
  methods: {
    showMsg() {
      console.log('hello world')
    }
  }
})

Dalam komponen yang perlu menggunakan kaedah awam ini, kami boleh menggunakan mapActions yang disediakan oleh Vuex Kaedah memetakan kaedah ini kepada komponen.

import { mapState, mapMutations, mapActions } from 'vuex'

computed: {
  ...mapState(['...']),
},
mutations: {
  ...mapMutations(['...']),
},
actions: {
  ...mapActions(['showMsg']),
}

Dengan cara ini anda boleh menggunakan kaedah showMsg dalam komponen.

4. Menggunakan EventBus

Kami boleh menggunakan EventBus milik Vue untuk berkomunikasi antara komponen, mengikat kaedah yang perlu dikongsi dengan EventBus dan komponen lain boleh menggunakan kaedah ini.

Sebagai contoh, kami mencipta EventBus dalam main.js:

import Vue from 'vue'

export const EventBus = new Vue()

Dalam komponen yang perlu menggunakan kaedah kongsi, kami boleh menggunakan kaedah EventBus.$on untuk mendengar acara untuk mendapatkan panggilan Messages untuk kaedah kongsi.

mounted(){
  EventBus.$on('showMsg', ()=>{this.showMsg()})
},

Dalam komponen dengan kaedah dikongsi, kita boleh menggunakan kaedah EventBus.$emit untuk mencetuskan acara showMsg.

EventBus.$emit('showMsg')

Ringkasan

Di atas ialah beberapa cara untuk memanggil kaedah antara berbilang fail dalam Vue. Melalui Mixin, ini.$refs, Vuex dan EventBus, kita boleh dengan mudah menyedari keperluan untuk berkongsi kaedah dalam berbilang komponen. Dalam perkembangan sebenar, kita boleh memilih kaedah yang sesuai dengan kita mengikut situasi sebenar.

Atas ialah kandungan terperinci Beberapa cara untuk memanggil kaedah antara berbilang fail Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!