[英]Vue.js Pass Component Data Value to Child Component
I have a component TopBar.vue
and I'm trying to open a modal (a child component Feedback.vue
). 我有一个组件
TopBar.vue
,我正在尝试打开一个模态(子组件Feedback.vue
)。
How do I bind the showFeedbackModal
property between both components? 如何在两个组件之间绑定
showFeedbackModal
属性?
I want to make it so that when you click the <a>
tag with @click="showFeedbackModal = true
the value true
gets passed to the <feedback>
component and the modal is shown. 我想这样做,当你点击带有
@click="showFeedbackModal = true
的<a>
标签时,值true
会传递给<feedback>
组件并显示模态。
TopBar.vue (Main) 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 (modal) 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>
You are setting your showModal
property in the Feedback
component's mounted
hook. 您设置您
showModal
在酒店Feedback
组件的mounted
挂钩。 This means that when the component is mounted to the DOM, the value of showModal
will be set to whatever showFeedbackModal
is initially but then won't change if the value of showFeedbackModal
ever changes. 这意味着当组件安装到DOM时,
showModal
的值将设置为最初的showFeedbackModal
,但是如果showFeedbackModal
的值发生变化则不会更改。
You should just make showModal
a prop in your Feedback
component: 您应该只将
showModal
作为Feedback
组件中的道具:
export default {
props: ['showModal'],
}
And then, in your TopBar
component, you just need to pass the showFeedbackModal
variable as the value for the showModal
property: 然后,在
TopBar
组件中,您只需要将showFeedbackModal
变量作为showModal
属性的值传递:
<feedback :showModal="showFeedbackModal"></feedback>
If you want the Feedback
modal component to be able to affect its parent component's showFeedbackModal
variable, you can emit a custom event in the Feedback
component: 如果希望
Feedback
模式组件能够影响其父组件的showFeedbackModal
变量,则可以在Feedback
组件中发出自定义事件:
<button class="modal-close" @click="$emit('close')"></button>
And then update the value of showFeedbackModal
in the handler for that event: 然后在该事件的处理程序中更新
showFeedbackModal
的值:
<feedback
:showModal="showFeedbackModal"
@close="showFeedbackModal = false"
></feedback>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.