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

Question

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

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 布局？

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

Answer 1

从 child 向上传递数据最好由 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

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

How to pass prop from page to layout

vue.js

nuxt.js

vue-props