Rufe eine Parent Methode aus einer Child Componente auf

Wer bei Vue die Componente ansatzweise kleinteilig gliedert, wird schnell auf eine Fragestellung gestossen sein: “Wie kann ich eine Parent Methode aus einer Child Componente aufrufen?” Am Beispiel kurz mal erklärt.

Eure Parent Componente ist eine Artikelliste. Wenn man auf ein Item der liste klickt öffnet sich ein Modal. Dieses Artikel Modal ist die Child Componente und zeigt den einzelnen Artikel an. Der Artikel wird über eine Propetie an die Child übergeben.

import postModal from './PostModalComponent.vue'
export default {
  name: "post-table",   
  components: {       
    postModal   
  },   
  props: ['data'],   
  data() {     
    return {         
      postData: '',         
      showModal: false,     
    }   
  },   
  methods: {       
    openModal(data) {           
      this.postData = data           
      this.showModal = true;       
    },       
    customHandler: function() {
      console.log("works");           
      alert("update");       
    }   
  }
} 

Die Kommunikations von Parent zu Child sind stets Propeties bezigen. Also Daten. Wiederrum ist die Kommunikation von Child zur Parent Componente Event bezogen.

Heißt also, wenn in der Child Componente ein Event (Klick, Hover etc.) passiert, kann die Parent Componente in Kenntniss gesetzt werden. Das geschieht über die Globale $event Variante. In der Childkomponente ist sie in den Methoden mit this.$event anzusprechen. Was darauf hindeutet, dass sie eine vererbte Methode ist.

export default {   
  name: "post-modal",   
  props: {     
    showing:{       
      default:false     
    },     
    data: {       
      type: Object     
    }   
  },   
  data() {     
    return {       
      formValues: {         
        title: this.data.title,         
        content: this.data.content,       
      },     
    }   
  },   
  methods: {     
    async submitHandler (data) {           
      axios         
      .put('/api/posts/' + this.data.slug , data)         
      .then(response => {                     
        if(response.status == 200) {         
          this.$emit('updatePost');             
          console.log('SUCCESS')           
        } else {             
          console.log('ERROR')           
        }         
      })     
    }
  } 
}

Solange es ein so einfaches Componenten Verhältnis ist, dann ist es völlig in Ordnung es so zu machen. Aber wenn es verschachtelte Componente sind und die an verschiedenen Stelle der gesamten Applikation auf ein und dieselbe Source of Truth zurückgreifen, kommen Komplexitätsprobleme hinzu. Heißt dann viele Fehler, entwicklung kommt in Stocken und wird teuer. Daher nutzt man hier gerne sogenannten Event Bus. Kann man sich im übertragendem auch als Bus vorstellen. Die Daten steigen in den Bus ein und fahren an den einzelnen Komponeten vorbei und steigen alle an einer Stelle ab. Diese Stelle nennt man dann den store. Hier gibt es Funktionen wie mutator usw.