Was ist der richtige Weg, um Werte von einer importierten Geschwisterkomponente in Vue.js 2.0 zu mutieren?

Question

Ich verwende den Single-File-Komponenten-Ansatz mit Vue 2.0. Ich habe 3 Komponenten App (Eltern), AppHeader und FormModal. AppHeader und FormModal sind unmittelbare Kinder von App und Geschwister von einander.

Das Ziel ist es, dass, wenn eine Schaltfläche in AppHeader geklickt wird die FormModal Sichtbarkeit umgeschaltet werden soll. Das Problem, das ich habe, ist das Verständnis des unidirektionalen Datenflusses von Vue. Wie kann ich ein Ereignis an das übergeordnete Element (App) von AppHeader zurückgeben, um die Sichtbarkeit des Formulars zu ändern?

(AppHeader.vue)

<template> 
    <header> 
     <div class="app-header"> 
      <h1 class="app-title">Sample Header</h1> 
      <a class="link-right" v-on:click="toggleModal()" href="#"> 
       <i class="fa fa-pencil-square-o"></i> 
      </a> 
     </div> 
    </header> 
</template> 

<script> 
    import FormModal from "./FormModal.vue"; 
    export default { 
     name : "AppHeader", 
     props : ['visible'], 
     methods : { 
      toggleModal() { 
       this.visible = !this.visible; 
      } 
     }, 
     components : { 
      FormModal 
     } 
    } 
</script> 

(FormModal.vue)

<template> 
    <div class = "form-content" v-if="visible"> 
     <!-- Some form markup --> 
    </div> 
</template> 

<script> 
    export default { 
     name : "FormModal", 
     props : ['visible'] 
     //Also have data, methods, and computed here, but they aren't relevant to the example. 
    } 
</script> 

Ich habe sicherlich das Konzept der Requisiten in diesem Beispiel verpfuscht. Ich bin sehr verwirrt über die korrekte Verwendung von Requisiten beim Importieren einer Vorlage.

Edit:

Verzeihen Sie mir, dies ist mein erster Tag mit Vue arbeiten. Ich habe anfangs eine sehr wichtige Information weggelassen, meine App.vue Datei, die das übergeordnete Element aller meiner Vorlagen ist.

(App.vue)

<template> 
    <div class="app"> 
     <AppHeader></AppHeader> 
     <FormModal></FormModal> 
    </div> 
</template> 

<script> 
    import AppHeader from "./AppHeader.vue"; 
    import Compose from "./FormModal.vue"; 
    export default { 
     data() { 
      return { 
       views : [AppHeader, FormModal] 
      } 
     }, 
     components : { 
      AppHeader, 
      FormModal 
     } 
    } 
</script> 

Zusammengefasst ist App die Eltern. Es gibt 2 Geschwister, AppHeader und FormModal. Wenn in AppHeader, FormModal eine Schaltfläche geklickt wird, sollte die Sichtbarkeit umgeschaltet werden.

Ich habe Vue's unidirektionalen Datenfluss noch nicht gut verstanden und bin mir nicht sicher, wie ich dieses Szenario angehen soll.

Answer 1

In Ihrem App-Header müssen Sie "visible" data field an ein "visible"-Attribut in der untergeordneten (formalen) Komponente binden. Dies bedeutet, dass "visible "data field in AppHeader und "visible" Eigenschaft in der untergeordneten Komponente wird "eng" zusammen sein und jede Änderung, die in das "sichtbare" Datenfeld vorgenommen wird, wird in Form Modal widergespiegelt werden.

<form-modal :visible="visible"/> 
... 
<script> 
import FormModal from "./FormModal.vue"; 
export default { 
    name : "AppHeader", 
    data() { 
     return { 
     visible: false 
     } 
    }, 
    methods : { 
     toggleModal() { 
      this.visible = !this.visible; 
     } 
    }, 
    components : { 
     FormModal 
    } 
} 
</script> 

FormModal Vorlage:

<template> 
    <div class="form-conten" v-if="visible"> 
     <!-- Some form markup --> 
    </div> 
</template> 

<script> 
    export default { 
    name : "FormModal", 
    props : ['visible'] 
    } 
</script> 

Die Idee ist, dass Ihr FormModal auf Änderungen von "sichtbar" prop hört, die kommen von ihm Eltern. Betrachten Sie es als "readonly" Variable (in FormModal).