vue.js - 如何在nuxtjs中将布局属性传递给页面组件

Question

我对 VueJS 和 NuxtJS 完全陌生。我似乎无法将布局中的属性传递给页面组件。

这是我的layouts/default.vue

<template>
    <Nuxt myprop="hello world" />
</template>

<script>
export default {
  data: () => ({
    myprop: 'hello galaxy',
  }),
}
</script>

这是我的pages/index.vue

<template>
  <div>My Prop is: {{myprop}}</div>
</template>

<script>
export default {
  props: {
    myprop: {
      type: String
      },
  },
}
</script>

当我加载我的应用程序时，我希望看到My Prop is: hello world。但相反，我看到 My Prop is:，而且 myprop 似乎是空的。

我做错了什么？ VueJS 或 NuxtJS 中布局组件如何将属性传递给子组件？

Answer 1

您不能以这种方式传递 props，但您可以使用 provide/inject 模式将数据从布局传递到页面:

layout/default.vue

<template>
    <Nuxt  />
</template>

<script>
export default {
  provide: function () {
    return { myprop: this.myprop };
  },
  data: () => ({
    myprop: 'hello galaxy',
  }),
}
</script>

pages/index.vue

<template>
  <div>My Prop is: {{myprop}}</div>
</template>

<script>
export default {
  inject: ["myprop"],
}
</script>