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>