NUXT如何将数据从页面传递到布局答案

【问题标题】：NUXT how to pass data from page to layoutNUXT如何将数据从页面传递到布局
【发布时间】：2020-10-15 17:04:15
【问题描述】：

我正在创建一个非常简单的网站。我想根据页面模板上navLayout 中的数据集更改导航栏元素。我想将数据传递给布局，然后使用props 将其发送到NavBar。我的问题是如何emit 数据从页面到布局。

layouts/default.vue

<template>
  <div>
    <NavBar />
    <div class="site-container">
      <nuxt />
    </div>
    <Footer />
  </div>
</template>
<script>
import NavBar from '~/components/NavBar.vue'

export default {
  components: {
    NavBar,
  }
}
</script>

pages/index.vue

...
<script>
export default {

  data: () => {
    return {
      navLayout: 'simple'
    }
  },
  computed: () => {
    return {
    this.$emit('navLayout', value)
    }

  }
...
</script>

【问题讨论】：

您想根据路线还是根据页面内的某些状态进行操作？
取决于页面内的状态。

标签： javascript vue.js nuxt.js

【解决方案1】：

一种选择是为此使用 vuex。

首先进入你的nuxt项目中的store文件夹并创建一个index.js文件

export const state = () => ({
   layout: 'Your default value',
})
    
export const mutations = {
  CHANGE_NAV_LAYOUT(state, layout) {
    state.layout = layout;
  }
}

然后在任何页面/组件中，您都可以调用this.$store.commit('CHANGE_NAV_LAYOUT',value)

为您的导航栏组件创建一个计算属性并将其引用到商店布局值：

computed: {
     navLayout() {
         return this.$store.state.layout;
     }
}

【讨论】：

我在哪里放置`this.$store.commit('CHANGE_NAV_LAYOUT',value)` 在页面/组件中？
我在 created() 中添加了它。但是现在默认总是被覆盖
当从页面上的组件更新存储值时，它们似乎也略有延迟。将值从组件向上传递到页面然后更改 $store. ?
@Simon 应该没有任何区别，我认为延迟是由其他原因引起的
我认为延迟是由于DOM的渲染方式造成的。

【解决方案2】：

你应该使用来自父元素的$emit，所以页面的父元素是布局页面。这是示例：

this.$parent.$emit("eventName");

然后在 Nuxt 组件的布局上监听动作。

<Nuxt @eventname="actionHandler()"/>

在这里）

【讨论】：