[英]Vuejs Share Data Between Components
我有两个组成部分:
在我的App.vue
组件中,我有一个我想从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>
我想从Sidekick.vue
访问myData
(在App.vue
中声明)
我尝试通过执行以下操作从Sidekick.vue
中导入App.vue
:
Sidekick.vue (错误尝试)
<script>
import App from '@/App'
export default {
name: 'Sidekick',
data () {
return {
myData: App.myData
}
}
}
</script>
我已经阅读了有关道具的信息 - 但只看到了对子/父组件的引用。 在我的例子中, Sidekick.vue
显示在App.vue
内的一个 div 中(不确定这是否使它成为“孩子”)。 我是否需要以某种方式将myData
的访问权限授予<router-view/>
?
更新:(显示 App.vue 和 Sidekick.vue 之间的关系
index.js (路由器文件)
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
在我们点击/sidekick
时被渲染
请记住,经验法则是使用道具以单向流传递数据
道具下降,事件上升。
https://v2.vuejs.org/v2/guide/components.html#Composing-Components
快速解决方案:
用于在<App/>
和<Sidekick/>
组件之间发布消息的全局事件总线。
https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
长期解决方案:
使用像vuex这样的状态管理库更好地将数据封装在一个地方(全局存储),并使用import { mapState, mapMutations } from 'vuex'
从组件树中订阅它
当您进行亲子交流时,最好和推荐的选择是使用道具和事件。 在 Vue 文档中阅读更多内容
当想要在许多组件之间共享状态时,最好和推荐的方法是使用Vuex 。
如果你想使用简单的数据共享,你可以使用Vue observable 。
简单示例:假设您有一个游戏,并且您希望许多组件都可以访问错误。 (组件可以访问和操作它)。
错误.js
import Vue from "vue";
export const errors = Vue.observable({ count: 0 });
组件1.vue
import { errors } from 'path-of-errors.js'
export default {
computed: {
errors () {
get () { return errors.count },
set (val) { errors.count = val }
}
}
}
在Component1
中, errors.count
是被动的。 因此,如果作为模板,您有:
<template>
<div>
Errors: {{ errors }}
<button @click="errors++">Increase</button>
</div>
</template>
当您单击“增加”按钮时,您将看到错误增加。
如您所料,当您在另一个组件中导入errors.js
时,两个组件都可以参与操作errors.count
。
注意:即使您可能使用 Vue.observable API 进行简单的数据共享,您也应该知道这是一个非常强大的 API。 例如阅读使用 Vue Observables 作为状态存储
应用程序.vue:
<router-view pass_data='myData'/>
Sidekick.vue:
export default {
name: "Sidekick",
props: ["pass_data"],
created() {
alert("pass_data: "+this.pass_data)
}
}
如果 App.js(Parent) 和 Sidekick(Child)
应用程序.js
在模板中
在脚本中从 './Sidekick.vue 导入 Sidekick:
Sidekick.vue
道具:['myData']
现在您可以在 Sidekick 中的任何地方访问 myData。 在模板 myData 和脚本 this.myData 中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.