如何在子组件之间共享数据变量
我有父组件 addUser.vue ，它包含 v-stepper ，我想将 v-stepper-content 重构为几个子组件< code>StepperOne.vue、StepperTwo.vue、StepperThree.vue 像这样
adddUser.vue
<v-stepper>
<v-stepper-header>
</v-stepper-header>
<v-stepper-items>
<stepper-one>
</stepper-one>
<stepper-two>
</stepper-two>
<stepper-three>
</stepper-three>
</v-stepper>
//normally we just do this and use `v-model` but child-parent component thing is complicated
<script>
export default {
data() {
return {
firstname: "",
lastname: "",
select: null
}
}
}
</script>
并且这三个子组件使用相同的数据变量，名： “”， 姓氏：“”，和选择：null（针对性别）。如何将这三个子组件之间的变量共享到父组件中？
更好的方法是什么？
I have parent component addUser.vue and it contains v-stepper and I want to refactor v-stepper-content into couple of child components StepperOne.vue, StepperTwo.vue, StepperThree.vue like this
adddUser.vue
<v-stepper>
<v-stepper-header>
</v-stepper-header>
<v-stepper-items>
<stepper-one>
</stepper-one>
<stepper-two>
</stepper-two>
<stepper-three>
</stepper-three>
</v-stepper>
//normally we just do this and use `v-model` but child-parent component thing is complicated
<script>
export default {
data() {
return {
firstname: "",
lastname: "",
select: null
}
}
}
</script>
And these three child components use the same data variables, firstname: "", lastname: "",and select: null (for gender). How do I share this variables between these three child components into parent component?
What's the better approach?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
就像之前回答的那样，您应该能够与属性和事件/发出组合共享数据。作为糖语法，您可以使用 v-model 或sync
另一种方法是使用 vuex 作为data 您可以使用 getter 来获取不同组件中的数据，并使用 setter（提交）将数据设置到存储中
Like answered before you should be able to share data with a propperty and event/emit combination. As a sugar syntax you could use v-model or sync
Another way is to use vuex as a state for the data you could use a getter to obtain data in different components and use setters (commit) to set data to the store