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

发布于06月25日

我正在创建一个非常简单的网站.我想根据页面模板上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>

推荐答案

一种 Select 是使用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)属性，并将其引用到存储布局值:

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

Vue.js相关问答推荐

Vue3外部数组的响应性

VueJS 中的 VisJS 时间轴：带有图像的项目放错了位置

如何将外部 svg 转换为 Vue3 组件？

当用户在嵌套路由中时激活链接

Nuxt 和 Vite 有什么区别？

vue js导航到带有问号的url

如何在 vuejs 自定义指令中传递动态参数

如何使用 v-on：change 将输入文本传递给我的 vue 方法？

动态插入字符串上的 Vue 事件处理程序不起作用

使用 Vue Router 设置页面标题

Vue 3 如何获取有关 $children 的信息

将数据传递给另一条路由上的组件

VueJS + Typescript：类型上不存在属性

Vuetify - 如何在 v-data-table 中单击时突出显示行

如何告诉 Vue 应用使用 Firebase 模拟器？

Vue devServer 代理没有帮助，我仍然收到 CORS 错误

动态更改我的 Vue.js SPA 主题的最佳方式？

从 ajax 调用填充 Vue.js 中的下拉列表

依赖关系甚至在 package.json 和 node_modules 中都没有定义

使用 vuex-persistedstate 仅使一个模块持久化

实用课程推荐