Vue.js 2.0でインポートされた兄弟コンポーネントの値を変更する適切な方法は何ですか？

Question

私はVue 2.0でシングルファイルコンポーネントアプローチを使用しています。私は3つのコンポーネントApp（親）、AppHeader、およびFormModalを持っています。 AppHeaderおよびFormModalは、直接子のAppとお互いの兄弟です。

AppHeaderのボタンをクリックすると、FormModalの視認性を切り替える必要があります。私が持っている問題は、Vueの単方向データフローを理解することです。フォームの可視性を変更することを知らせるために、親に戻るイベント（App）をAppHeaderからどのように渡すことができますか？

（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> 

私は確かにこの例では、小道具の概念をしくじってきました。私は、テンプレートをインポートするときに小道具を使う正しい方法については非常に混乱しています。

編集：

が私を許し、これはVueのでの作業私の最初の日です。私は最初、非常に重要な情報を除外しました。私のApp.vueファイルは、私のすべてのテンプレートの親です。要約すると

（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> 

、アプリケーションは親です。 2つの兄弟、AppHeaderとFormModalがあります。ボタンがAppHeaderでクリックされると、FormModalの表示を切り替える必要があります。

私はまだVueの単方向データフローを十分に把握していませんが、このシナリオにどのようにアプローチするかはわかりません。

Answer 1

"visible" data fieldを子（フォームモーダル）コンポーネントの"visible"属性にバインドする必要があります。これは、子コンポーネント内の"visible "data fieldがAppHeaderと"visible"のプロパティが "緊密"になり、 "可視"データフィールドに対して行われた変更がフォームモーダルに反映されることを意味します。

<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テンプレート：

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

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

アイデアは、あなたのFormModalが、それは親から来る「目に見える」小道具のいずれかの変更を待機するということです。それを「読み込み専用」変数と考えてください（FormModalで）。