如何将 prop 从页面传递到布局

Question

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

默认.vue

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

前端.vue

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

有什么方法可以将

light: true

从页面传递到布局，以便我只能使用

default.vue

布局吗？

我知道我可以在已安装的情况下发出一些事件，但想防止为此使用生命周期挂钩

Answer 1

从子级向上传递数据理想情况下是通过发出事件完成的，并且您不需要为此使用生命周期挂钩（自定义事件侦听器就可以了）。

但我认为更干净的解决方案是将通用标记分解到接收

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>

演示