Cara memanggil kaedah antara komponen Vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas semasa membangunkan aplikasi web. Ia menyediakan banyak ciri berguna seperti pengikatan data, pembahagian komponen dan penghalaan, menjadikannya alat yang berkuasa. Komponen dalam Vue ialah bahagian kod yang boleh digunakan semula Dalam artikel ini, kita akan membincangkan cara memanggil kaedah antara komponen Vue.

Dalam Vue, komponen boleh mengandungi komponen anak, yang boleh berkomunikasi dan berinteraksi dengan komponen induk. Sebagai contoh, kita boleh mentakrifkan komponen induk dan kemudian mengandungi berbilang subkomponen di dalamnya Subkomponen ini boleh memanggil kaedah antara satu sama lain, supaya fungsi yang lebih kompleks boleh dilaksanakan. Berikut ialah contoh mudah:

// 定义一个子组件
Vue.component('child-component', {
  template: '<div><button @click="onClick">点击我</button></div>',
  methods: {
    onClick: function() {
      this.$emit('child-clicked')
    }
  }
})

// 定义一个父组件
new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    onChildClicked: function() {
      this.message = '子组件被点击了'
    }
  }
})

Dalam contoh ini, kami mentakrifkan subkomponen child-component yang mengandungi butang yang apabila butang itu diklik, ia mencetuskan kaedah onClicknya sendiri dan menghantar acara. Dalam kaedah onClick, kami menggunakan $emit untuk menghantar acara child-clicked. Seterusnya, dalam komponen induk, kami mentakrifkan kaedah onChildClicked untuk mengendalikan acara ini. Dalam kaedah onChildClicked, kami hanya menetapkan rentetan kepada atribut message.

Sekarang kita boleh memasukkan komponen anak dalam komponen induk dan menetapkan pendengar ini untuk acara child-clicked Jika peristiwa dicetuskan, kaedah onChildClicked akan dilaksanakan berubah Nilai message sebenarnya boleh melaksanakan logik yang lebih kompleks di sini.

<div id="app">
  <child-component @child-clicked="onChildClicked"></child-component>
  <p>{{ message }}</p>
</div>

Di sini, kami menggunakan komponen anak dalam templat komponen induk dan menambah pendengar yang mendengar acara child-clicked dan melaksanakan kaedah onChildClicked.

Secara keseluruhannya, komponen Vue ialah alat yang sangat berguna kerana ia membantu anda memecahkan kod anda kepada bahagian yang boleh digunakan semula dan membolehkan anda mempunyai kawalan yang lebih baik ke atas setiap komponen. Pendengar $emit dan @ sangat berguna apabila memanggil kaedah antara komponen, kerana ia membolehkan anda menghantar data dengan mudah dan mencetuskan peristiwa antara komponen induk dan anak.

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