如何在组件之间共享数据 Vue js [英] How to share data between components Vue js
问题描述
我看到了关于这个的帖子，但我不太容易理解我必须做什么才能在组件之间共享数据，我不想使用事件总线，所以你能告诉我如何使用道具吗??
组件 A:
<div><div class="容器"><fileForm></fileForm>//<--- 组件 B</模板><脚本>导出默认{name: "仪表盘",数据() {返回 {用户:{}，};},方法: {checkIfImLoggedIn() {}},onComplete() {},},安装(){this.checkIfImLoggedIn();}};
组件 B:
//...</模板><脚本>导出默认{name: "文件格式",数据() {返回 {文件扩展名:[CSV"，EXCEL"]，sharedData : {},//<--- 例如分享这个};},方法: {}};如果你想从父级到子级共享数据，你可以这样做:
在组件 A
在组件 B
道具:{东西:对象}<小时>
如果你想从孩子到父母分享数据，你必须使用事件总线或 vuex:https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
Hi there I saw posts talking about this, but is not easy for me understand what I have to do to share data between components, I don't want to use event bus so can you tell me how to use props??
Component A:
<template>
<div>
<div class="container">
<fileForm></fileForm> //<--- THE COMPONENT B
</div>
</div>
</div>
</template>
<script>
export default {
name: "DashBoard",
data() {
return {
user: {},
};
},
methods: {
checkIfImLoggedIn() {
}
},
onComplete() {
},
},
mounted() {
this.checkIfImLoggedIn();
}
};
</script>
Component B:
<template>
//...
</template>
<script>
export default {
name: "FileForm",
data() {
return {
fileExtensions: ["CSV", "EXCEL"],
sharedData : {}, //<--- for example share this
};
},
methods: {}
};
</script>
If you want to share data from the parent to the child you can do:
on component A
<fileForm :something="user"></fileForm>
In component B
props: {
something: Object
}
If you want to share data from the child to the parent you have to use an event bus or vuex: https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
这篇关于如何在组件之间共享数据 Vue js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
