Vue.js將組件數據值傳遞給子組件

我有一個組件TopBar.vue，我試圖打開一個模塊（一個子組件Feedback.vue）。Vue.js將組件數據值傳遞給子組件

如何在兩個組件之間綁定showFeedbackModal屬性？

我想讓它這樣，當您點擊與@click="showFeedbackModal = true值true被傳遞到<feedback>組件和模態顯示在<a>標籤。

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>

來源

2017-06-12 Mike Barwick

你設置你showModal財產在Feedback組件的mounted掛鉤。這意味着當組件安裝到DOM時，showModal的值將設置爲showFeedbackModal最初的值，但如果showFeedbackModal的值發生更改，則值不會更改。

你應該只讓showModal的道具在你Feedback組件：

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

，然後在你的TopBar組件，您只需將showFeedbackModal變量傳遞作爲showModal屬性的值：

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

如果要將Feedback模態組件能影響其父組件的showFeedbackModal變量，你可以在Feedback組件發出自定義事件：

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

然後在處理該事件更新的showFeedbackModal值：

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

來源

2017-06-12 16:46:09 thanksd

哎。很近。這是有道理的。讓我試試看。 –

所以模態會出現。但是當我嘗試關閉時（通過單擊關閉按鈕或模態背景），我得到一個錯誤：'避免直接改變一個道具，因爲只要父組件重新渲染，該值就會被覆蓋。相反，使用基於道具值的數據或計算屬性。 Prop正被突變：「showModal」' –

您應該發出一個事件並讓父組件處理數據操作。看我的編輯。 – thanksd

Vue.js將組件數據值傳遞給子組件

回答

相關問題