从Nuxt.js中的页面更改布局变量值

Question

关于Vue / Nuxt，我确实不了解，如果我在/blog/slug.vue中导入一个组件，我可以根据需要更改变量，但是我该怎么做，我想在/layouts/default.vue？我可以使用head（）和来实现，但是我可以使用简单的变量来实现，例如{{navbar_title}}

例如，我的/layouts/default.vue看起来像这样：

<template>
  <div class="navbar">
    {{ navbar_title }} 
  </div>
</template>

是否可以从/pages/about.vue之类的页面更改{{navbar_title}}的值？

Answer 1

请访问代码沙箱link

代码

在NavBar.vue中

<template>
  <div>NavBar component  {{ title }}</div>
</template>

<script>
export default {
  props: {
    title : {
      type: String,
      required: true,
      default: 'Website title/ suitable title'
    }
  }
}
</script>

来自页面组件pages/index.vue

<template>
  <section>
    <div>
      <NavBar :title="title"/>
      <h2>Starter for CodeSandBox</h2>
    </div>
  </section>
</template>

<script>
import NavBar from '~/components/NavBar.vue'

export default {
  pageTitle: 'from Home Page',
  components: {
    NavBar
  },
  computed: {
    title() {
      return this.$route.matched.map((r) => {
        return r.components.default.options
          ? r.components.default.options.pageTitle
          : r.components.default.pageTitle;
      })[0];
    }
  }
}
</script>