Vue.jsコンポーネントデータ値を子コンポーネントに渡す

Question

私はコンポーネントTopBar.vueを持っており、モーダル（子コンポーネントFeedback.vue）を開こうとしています。

showFeedbackModalプロパティを両方のコンポーネントにバインドするにはどうすればよいですか？

私はあなたが@click="showFeedbackModal = trueで<a>タグをクリックすると、値trueが<feedback>コンポーネントに渡されると、モーダルが示されているように、それを作りたいです。

TopBar.vue（メイン）

<template> 
    <div> 
     <section class="top-bar level"> 
      <div class="level-left"> 
       ... 

       <ul class="level-item"> 
        <li><a @click="showFeedbackModal = true"><i class="fa fa-envelope-open-o" aria-hidden="true"></i> Beta Feedback</a></li> 
       </ul> 
      </div> 
      ...   
     </section> 

     <feedback :showFeedbackModal="showFeedbackModal"></feedback>    
    </div> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       showFeedbackModal: false 
      } 
     } 
    } 
</script> 

Feedback.vue（モーダル）

<template> 
    <div> 
     <div v-if="showModal" class="modal is-active"> 
      <div class="modal-background" @click="showModal = false"></div> 
      <div class="modal-content"> 
       <div class="box"> 
        This is the feedback content 
       </div> 
      </div> 
      <button class="modal-close" @click="showModal = false"></button> 
     </div> 
    </div> 
</template> 

<script> 
    export default {   
     props: ['showFeedbackModal'], 

     data() { 
      return { 
       showModal: false 
      } 
     }, 

     beforeMount() { 
      this.showModal = this.showFeedbackModal; 
     } 
    } 
</script> 

Answer 1

あなたはFeedbackコンポーネントのmountedフックであなたのshowModalプロパティを設定しています。つまり、コンポーネントがDOMにマウントされると、showModalの値は最初はshowFeedbackModalの値に設定されますが、showFeedbackModalの値が変わると変更されません。

あなたは自分のFeedbackコンポーネントでshowModal小道具行う必要があります。

export default {   
    props: ['showModal'], 
} 

そして、あなたのTopBarコンポーネントで、あなただけのshowModalプロパティの値としてshowFeedbackModal変数を渡す必要があります：

<feedback :showModal="showFeedbackModal"></feedback> 

---

Feedbackモーダルコンポーネントに

<button class="modal-close" @click="$emit('close')"></button> 

そして、そのイベントのハンドラでshowFeedbackModalの値を更新します：あなたはFeedbackコンポーネントでカスタムイベントを発することができ、その親コン​​ポーネントのshowFeedbackModal変数に影響を与えることができるよう

<feedback 
    :showModal="showFeedbackModal" 
    @close="showFeedbackModal = false" 
></feedback>