Bagaimanakah kaedah awam Vue memanggil kaedah komponen lain?

Dalam Vue, komunikasi komponen adalah isu yang sangat kritikal. Komponen mungkin perlu memanggil kaedah komponen lain untuk melaksanakan fungsinya sendiri Dalam kes ini, kita perlu menggunakan beberapa cara teknikal untuk mencapai komunikasi antara komponen.

Vue menyediakan banyak kaedah untuk melaksanakan komunikasi antara komponen, termasuk bas acara, Vuex, prop, emit, dsb. Tetapi apabila kita perlu memanggil kaedah komponen lain dalam kaedah awam, menggunakan kaedah ini mungkin menjadi rumit dan menyusahkan. Pada masa ini, kita boleh menggunakan $root dan $refs pada contoh Vue untuk memanggil kaedah komponen lain.

$root dan $refs ialah dua sifat bagi tika Vue yang membolehkan kami mengakses satu komponen daripada komponen lain. $root ialah instance Vue root dan boleh mengakses keseluruhan aplikasi Vue. $refs ialah objek yang mengandungi semua subkomponen dengan atribut ref.

Pertama, kita perlu mentakrifkan kaedah dalam komponen lain dan menambah atribut ref pada komponen ini dalam templat. Contohnya:

<template>
  <div>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
  export default {
    methods: {
      increment() {
        this.$emit('increment')
      }
    }
  }
</script>

Di sini, kami mentakrifkan kaedah kenaikan dan mengikatnya pada butang. Apabila butang diklik, kaedah kenaikan mencetuskan 'kenaikan' acara tersuai. Pada masa yang sama, kami menentukan komponen ini sebagai nod anak komponen induknya dan menambah atribut ref padanya.

Seterusnya, dalam komponen induk, kita boleh mengakses komponen anak melalui atribut $refs dan memanggil kaedahnya. Contohnya:

<template>
  <div>
    <ChildComponent ref="child" />
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent'

  export default {
    components: {
      ChildComponent
    },
    created() {
      console.log(this.$refs.child)
      this.$refs.child.increment()
    }
  }
</script>

Di sini kami mencipta komponen induk dan menambah komponen anak ChildComponent dalam templat. Pada masa yang sama, kami memperoleh contoh komponen anak melalui ini.$refs.child dan memanggil kaedah kenaikannya. Kami memanggil $refs dalam cangkuk yang dicipta kerana subkomponen belum dicipta lagi apabila cangkuk yang dipasang digunakan.

Dengan cara ini, kita boleh dengan mudah memanggil kaedah komponen lain dalam kaedah awam. Kami hanya perlu mendapatkan contoh komponen yang sepadan melalui $root atau $refs dalam kaedah awam, dan memanggil kaedahnya secara langsung.

Perlu diambil perhatian bahawa $refs ialah objek tidak responsif, dan ia hanya akan diisi apabila komponen diberikan, jadi jika kita perlu mendapatkan contoh komponen kanak-kanak sebelum komponen diberikan, kita boleh menggunakan harta $children.

Ringkasnya, memanggil komponen lain melalui $root dan $refs ialah kaedah yang sangat mudah dan praktikal. Walau bagaimanapun, kita perlu memberi perhatian kepada beberapa butiran, seperti sama ada komponen telah diberikan, sama ada terdapat atribut ref, dsb. Kaedah ini boleh memberikan penyelesaian yang baik apabila kita perlu memanggil kaedah komponen lain dalam kaedah awam.

Atas ialah kandungan terperinci Bagaimanakah kaedah awam Vue memanggil kaedah komponen lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!