将部分页面部分添加到 nuxt 中的主布局

【问题标题】：add part of the page section to the master layout in nuxt将部分页面部分添加到 nuxt 中的主布局
【发布时间】：2020-08-19 12:11:57
【问题描述】：

我有一个如下所示的 nuxt 布局

<template>
  <div id="app">
    <div>
      <div class="bg-dark d-block">
        set content in page
      </div>

      <nuxt />
    </div>
  </div>
</template>

但现在我需要填写 set content in page 部分以从页面组件导入。

我的意思是我喜欢将不同页面中的自定义组件导入此部分

是否有可能或有什么方法可以做到这一点？

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

您可以使用商店数据来执行此操作

在您的页面中：

this.$store.dispatch('changeLayoutComponent', 'componentName')

并且在您的 nuxt 布局中使用此数据在不同页面中显示不同的组件，您可以使用动态组件来实现这一点

=> 在您的布局中

<template>
    ...
    <component v-bind:is="currentTabComponent"></component>
    ...
</template>
<script>
  export default {
     data() {
       return {
          currentTabComponent: this.$store.state.componentName
       }
     },
     //watch store for changes
     watch: {
       "$store.state.componentName": function() {
            this.currentTabComponent= this.$store.state.componentName
       }
     }
  }
</script>

【讨论】：