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

您設置您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>