如何将道具从页面传递到布局答案

【问题标题】：How to pass prop from page to layout如何将道具从页面传递到布局
【发布时间】：2022-01-09 16:38:59
【问题描述】：

我目前有重复的布局，唯一的区别是我传递给组件的道具：

default.vue

    <template>
      <div class="page">
        <SkipToContent />
        <Header />
        <Nuxt />
        <Footer />
      </div>
    </template>

front.vue

    <template>
      <div class="page">
        <SkipToContent />
        <Header light="true" />
        <Nuxt />
        <Footer />
      </div>
    </template>

有什么方法可以将 light: true 从页面传递到布局，以便我只能使用 default.vue 布局？

我知道我可以在挂载时发出一些事件，但想阻止使用生命周期挂钩

【问题讨论】：

我认为你可以利用全局存储，并根据需要提交更改

标签： vue.js nuxt.js vue-props

【解决方案1】：

最好由emitting events 完成从子级传递数据，您不需要为此使用生命周期挂钩（自定义事件侦听器可以工作）。

但我认为更简洁的解决方案是将通用标记分解为接收light 属性的组件，并在两种布局中使用它们：

<!-- components/CommonLayout.vue -->
<template>
  <div class="page">
    <SkipToContent />
    <Header :light="light" />
    <Nuxt />
    <Footer />
  </div>
</template>

<script>
export default {
  props: {
    light: Boolean,
  }
}
</script>

<!-- layouts/default.vue -->
<template>
  <CommonLayout />
</template>

<!-- layouts/front.vue -->
<template>
  <CommonLayout light />
</template>

demo

【讨论】：