Question

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

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

Answer 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;
     }
}

Answer 2

您应该从父元素使用 $emit，因此页面的父元素是布局页面。这是示例：

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

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

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

这里是）

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

2 个答案: