Bincangkan kaedah memanggil kaedah ibu bapa-anak dalam Vue

Vue ialah rangka kerja JavaScript yang sangat biasa digunakan Ia membina antara muka pengguna dalam cara berasaskan komponen, dan dalam proses ini, komunikasi antara komponen adalah sangat penting. Dalam Vue, komunikasi antara komponen induk dan komponen anak boleh dicapai melalui prop dan acara. Artikel ini akan meneroka cara panggilan kaedah ibu bapa-anak dibuat dalam Vue.

Dalam Vue, komunikasi antara komponen ibu bapa dan anak boleh dicapai melalui prop dan acara. Props ialah atribut, iaitu kaedah menghantar data daripada komponen induk kepada komponen anak. Acara ialah acara, iaitu kaedah menghantar mesej daripada komponen anak kepada komponen induk.

Di bawah kami akan menggunakan contoh untuk menunjukkan cara memanggil kaedah ibu bapa-anak dalam Vue. Mula-mula, kami mencipta subkomponen baharu bernama "child.vue":

<template>
  <div>
    <button @click="onClickButton">点击调用父组件方法</button>
  </div>
</template>

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

Dalam subkomponen, kami mentakrifkan butang dan mengikat acara klik. Apabila butang diklik, kami mencetuskan acara callParentFunc melalui ini.$emit dan lulus parameter kosong. Dengan cara ini, komponen kanak-kanak menghantar mesej keluar, dan komponen induk boleh memanggil kaedah komponen kanak-kanak dengan mendengar acara ini.

Seterusnya, kami menerima acara ini dalam komponen induk dan memanggil kaedah komponen anak. Dalam komponen induk, kami menggunakan komponen anak dalam templat, mendengar acara callParentFuncnya dan mengikat kaedah onChildClick:

<template>
  <div>
    <h2>我是父组件</h2>
    <Child @callParentFunc="onChildClick"/>
  </div>
</template>

<script>
  import Child from './child.vue'
  export default {
    components:{Child},
    methods: {
      onChildClick() {
        console.log("调用子组件方法")
      }
    }
  }
</script>

Seperti yang anda lihat, kami menggunakan komponen anak dalam templat dan Mendengar acara callParentFunc komponen kanak-kanak. Pada masa yang sama, kaedah onChildClick ditakrifkan dalam kaedah Kami boleh melaksanakan kaedah ini apabila komponen anak menghantar mesej kepada komponen induk.

Ringkasan: Melalui pengenalan artikel ini, kami memahami cara kaedah ibu bapa-anak dipanggil dalam Vue, iaitu komponen anak mencetuskan peristiwa melalui ini.$emit dan menghantar mesej kepada bahagian luar, semasa komponen induk mendengar ini Selepas acara, anda boleh memanggil kaedah dalam komponen anak. Kaedah ini ialah cara yang sangat mudah dan praktikal untuk berkomunikasi antara komponen ibu bapa dan anak dalam Vue.

Atas ialah kandungan terperinci Bincangkan kaedah memanggil kaedah ibu bapa-anak dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!