Vue-da wakalary ýagtyzmak

Bildigiňiz ýaly, maglumatlar ata-enadan çagalyk komponentlerine tarap hereket edýär. Indi bolsa çagalyk komponentleriniň ata-ena komponentleri bilen nähili aragatnaşyk edýändigine seredeliň. Bu wakalary ýagtyzmak arkaly amala aşyrylýar. Geliň amalyýetde göreliň.

Ata-enanyň komponentinde käbir usul bardyr diýeliň:

App.vuemethods: {
  func() {
    alert('xxx');
  }
}

Bu usuly çagalyk komponentine parametr hökmünde geçireliň:

App.vue<template>
  <User @show="func" />
</template>

Ýagtyzylýan wakany emits sazlamasynda belgileliň:

components/User.vueexport default {
  emits: ['show'],
  data() {
    return {
      
    }
  }
}

Indi çagalyk komponentinde basylanda işlenjek düwmäni düzeliň:

components/User.vue<template>
  <button @click="handle">düwme</button>
</template>

Basylyş işleýjisini düzeliň:

components/User.vuemethods: {
  handle() {
    
  }
}

Indi basylyş işleýjisinde ata-enanyň usulynyň çagyrylmagyny tabşyralyň. Bunyň üçin $emit funksiýasyny ulanyp waka ýagtyzmaly, onuň parametri hökmünde ýagtyzylýan wakanyň adyny görkezmeli:

components/User.vuemethods: {
  handle() {
    this.$emit('show');
  }
}