Por ejemplo, en mi /layouts/sidebar.vue tengo el siguiente código:
<template> <div class="mainContainer"> <nuxt :date-sidebar="'This is from sidebar'"/> </div> </template> Quiero pasar el valor de date-sidebar de los diseños a /pages/Request/index.vue y, finalmente, a /components/RequestTable.vue , pero actualmente lo estoy probando pasando cadenas estáticas con el siguiente código:
<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> Puedo recibir el valor estático de /page/Request/index.vue a mi /components/Request/RequestTable.vue pero no puedo recibir los datos de /layouts/sidebar.vue a mi /pages/Request/index .
Entonces, mi pregunta, como sugiere el título, sería, ¿cómo paso la barra lateral de date-sidebar de /layouts/sidebar.vue a /pages/Request/index .
Hasta donde yo sé, esto solo funciona con nuxt-link (en páginas así) como se muestra aquí y no 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>Es un poco lógico porque el diseño predeterminado no está realmente dirigido a este tipo de uso. Si necesita algo dinámico, generalmente es al revés (emitir al diseño) o simplemente usar Vuex (principalmente porque no tiene que "emitir" varios componentes).
También podrías hacer algunas cosas ingeniosas como esta.
child.vue
<template> <div> {{ dateSidebar }} </div> </template> <script> export default { computed: { dateSidebar() { return this.$parent.$attrs['date-sidebar'] } }, } </script>Pero esto no es tan común, por lo tanto, probablemente no sea la forma de hacerlo.
Debe usar los accesorios nuxtChildKey en las propiedades de su hijo. Desde el diseño, vincule nuxt-child-key en lugar de :date-sidebar .
Es posible que desee pasar un objeto en lugar de una cadena para poder pasar más datos. Así que su layout/sidebar se vería así...
<template> <div class="mainContainer"> <nuxt :nuxt-child-key="'This is from sidebar'"/> </div> </template>En la página infantil...
<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>Y hay una documentación disponible aquí... nuxt-child-key