[英]In Nuxt, how do you pass data from layouts to pages?
For example, in my /layouts/sidebar.vue
I have the following code:例如,在我的/layouts/sidebar.vue
中,我有以下代码:
<template>
<div class="mainContainer">
<nuxt :date-sidebar="'This is from sidebar'"/>
</div>
</template>
I want to pass the value of date-sidebar
from layouts to /pages/Request/index.vue
and eventually to /components/RequestTable.vue
but I'm just currently testing it by passing static strings with the following code:我想将date-sidebar
的值从布局传递到/pages/Request/index.vue
并最终传递给/components/RequestTable.vue
但我目前只是通过使用以下代码传递 static 字符串来测试它:
<template>
<div>
<RequestTable :date-requested="'something'"/>
{{ this.dateSidebar }} //data from sidebar that should receive something also tried just {{dateSidebar}}
</div>
</template>
<script>
export default{
props:['dateSidebar']
}
</script>
I can receive the static value from /page/Request/index.vue
to my /components/Request/RequestTable.vue
but I can't receive the data from the /layouts/sidebar.vue
to my /pages/Request/index
.我可以从/page/Request/index.vue
接收 static 值到我的/components/Request/RequestTable.vue
但我无法从/layouts/sidebar.vue
接收数据到我的/pages/Request/index
。
So my question as the title suggest would be, how do I pass date-sidebar
from /layouts/sidebar.vue
to /pages/Request/index
.所以我的问题正如标题所暗示的那样,我如何将date-sidebar
从/layouts/sidebar.vue
到/pages/Request/index
。
As far as I know, this only works with nuxt-link
(in pages so) as shown here and not nuxt
据我所知,这只适用于nuxt-link
(在页面中),如此处所示,而不是nuxt
pages/child.vue
<template>
<nuxt-child :test="'RESOLVE_PLZ'"/>
</template>
pages/child/index.vue
<script>
export default {
props: ["test"],
mounted() {
console.log(this.test) // RESOLVE_PLZ
}
}
</script>
It is kinda logical because the default layout is not really aimed towards this kind of usage.这有点合乎逻辑,因为默认布局并不是真正针对这种用法。 If you need something dynamic, it's usually going the other way around (emitting to the layout) or simply using Vuex (mainly because of not having to "emit up" several components up).如果你需要一些动态的东西,它通常会反过来(发射到布局)或简单地使用 Vuex(主要是因为不必“发射”几个组件)。
You could also do some hacky things like this你也可以做一些像这样的骇人听闻的事情
child.vue
<template>
<div>
{{ dateSidebar }}
</div>
</template>
<script>
export default {
computed: {
dateSidebar() {
return this.$parent.$attrs['date-sidebar']
}
},
}
</script>
But this is not that common, hence probably not the way to do it.但这并不常见,因此可能不是这样做的方法。
You need to use the nuxtChildKey
props in your child properties.您需要在子属性中使用nuxtChildKey
道具。 From the layout, bind the nuxt-child-key
instead of :date-sidebar
.从布局中,绑定nuxt-child-key
而不是:date-sidebar
。
You may want to pass an object instead of a string so you can pass more data.您可能希望传递 object 而不是字符串,以便传递更多数据。 So your layout/sidebar
would look like...所以你的layout/sidebar
看起来像......
<template>
<div class="mainContainer">
<nuxt :nuxt-child-key="'This is from sidebar'"/>
</div>
</template>
On the child page...在子页面上...
<template>
<div>
<RequestTable :date-requested="'something'"/>
{{ this.dateSidebar }} //data from sidebar that should receive something also tried just {{dateSidebar}}
</div>
</template>
<script>
export default{
props:['nuxtChildKey'],
mounted(){
console.log(this.nuxtCHildKey, 'nck')
}
}
</script>
And there's a documentation available here... nuxt-child-key这里有一个文档...... nuxt-child-key
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.