Vuejs 在组件之间共享数据 [英] Vuejs Share Data Between Components
问题描述
我有两个组件:
- App.vue
- Sidekick.vue
在我的 App.vue 组件中，我想从 Sidekick.vue
App.vue
<div id="应用程序"><p>{{ myData }}</p><div class="sidebar"><路由器视图/>//我们的助手组件显示在这里<脚本>导出默认{name: '应用程序',数据 () {返回 {myData: '就是这个字符串'}}}
Sidekick.vue
<div class="sidekick">{{ 我的数据 }}<脚本>导出默认{名称:'Sidekick'}
我想从 Sidekick.vue
myData(在 App.vue 中声明)我尝试通过执行以下操作从 Sidekick.vue 中导入 App.vue:
Sidekick.vue (错误尝试)
我读过 props - 但只看到了对子/父组件的引用.就我而言，Sidekick.vue 显示在 App.vue 内的 div 中(不确定这是否使它成为子项").我需要以某种方式将 myData 的访问权限授予
更新:(显示 App.vue 和 Sidekick.vue 之间的关系
index.js (路由器文件)
从'vue'导入Vue从vue-router"导入路由器从 '@/components/Sidekick' 导入 Sidekick，从'@/components/FakeComponent' 导入 FakeComponentVue.use(路由器)const 路由器 = 新路由器({路线: [{小路: '/'，重定向:'/假组件'},{路径:'/sidekick'，name: 'Sidekick',组件:Sidekick},{路径:'/假组件'，name: '假组件',组件:FakeComponent}]})导出默认路由器Sidekick.vue 在我们点击 /sidekick
请记住，经验法则是使用 props 在单向流中传递数据
<块引用>道具向下，事件向上.
https://vuejs.org/v2/guide/components.html#Composing-Components
快速解决方案:
用于在
https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
长期解决方案:
使用像 vuex 这样的状态管理库来更好地将数据封装在一个地方(一个global store) 并使用 import { mapState, mapMutations } from 'vuex'
I have two components:
- App.vue
- Sidekick.vue
In my App.vue component, I have a property that I would like to access from Sidekick.vue
App.vue
<template>
<div id="app">
<p>{{ myData }}</p>
<div class="sidebar">
<router-view/> // our sidekick component is shown here
</div>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
myData: 'is just this string'
}
}
}
</script>
Sidekick.vue
<template>
<div class="sidekick">
{{ myData }}
</div>
</template>
<script>
export default {
name: 'Sidekick'
}
</script>
I would like access to myData (which is declared in App.vue) from Sidekick.vue
I have tried importing App.vue from within Sidekick.vue by doing something like:
Sidekick.vue (incorrect attempt)
<script>
import App from '@/App'
export default {
name: 'Sidekick',
data () {
return {
myData: App.myData
}
}
}
</script>
I have read about props - but have only seen references to child / parent components. In my case, Sidekick.vue is shown in a div inside App.vue (not sure if this makes it a "child"). Do I need to give access of myData to <router-view/> somehow?
UPDATE: (to show relationship between App.vue and Sidekick.vue
index.js (router file)
import Vue from 'vue'
import Router from 'vue-router'
import Sidekick from '@/components/Sidekick',
import FakeComponent from '@/components/FakeComponent'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
redirect: '/fakecomponent'
},
{
path: '/sidekick',
name: 'Sidekick',
component: Sidekick
},
{
path: '/fakecomponent',
name: 'FakeComponent',
component: FakeComponent
}
]
})
export default router
Sidekick.vue gets rendered when we hit /sidekick
Just keep in mind, the rule of thumb is using props to pass data in a one-way flow
props down, events up.
https://vuejs.org/v2/guide/components.html#Composing-Components
Quick solution:
Global event bus to post messages between your <App/> and <Sidekick/> components.
https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
Long term solution:
Use a state management library like vuex to better encapsulates data in one place (a global store) and subscribe it from your components tree using import { mapState, mapMutations } from 'vuex'
这篇关于Vuejs 在组件之间共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
