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 组件中，您只需传递 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>

Vue.js 将组件数据值传递给子组件

Vue.js Pass Component Data Value to Child Component

javascript

vue.js

vue-component

vuejs2