我不明白如何将“路由组件”加载的数据传递给“子路由组件”。(我正在将Vue.js与Vue-router结合使用)
我的路由器看起来像这样:
router.map({
'/a': {
component: A,
subRoutes: {
'/b': {
component: B
},
'/c': {
component: C
}
}
}
});
我只想与组件B和C共享组件A加载的数据。
提前致谢 !
您有两个简单的选择。
丑陋的
使用子$parent
路由组件中的选项。这使您可以访问父实例,这不是推荐的方法,但是很有效
// from the child component
this.$parent.someData
好的
使用道具。道具使您有机会将任何数据从父母传递给孩子。这样做更好,因为可以防止发生错误(传递数据而不是实例),并且仅传递所需的内容,即使它不是父数据的一部分也是如此。
// parent component
<template>
<child :childsdata="parentdata"></child>
</template
<script>
export default {
data: function () {
return {
parentdata: 'Hello!'
}
}
}
</script>
// child component
<template>
{{ childsdata }} <!-- prints "Hello!" -->
</template>
<script>
export default {
props: {
childsdata: {
type: String
}
}
}
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句