如何在 VueJS / Gridsome 中向页面添加自定义属性

Question

我正在开发一个 Vue/Gridsome 项目，想知道如何将 Page 中的变量导出到它的父级 Layout。

这是我的页面代码：

<template>
  <Layout>
    <h1>About us</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.</p>
  </Layout>
</template>

<script>
export default {
  metaInfo: {
    title: 'About us'
  }
}
</script>

如何导出自定义属性，例如 Author？

我想在 Layout 上输出属性:

<template>
    <h1>{{ page.author }}</h1>
    <slot/>
</template>

<script>
import SiteHeader from '@/components/SiteHeader.vue'
import SiteFooter from '@/components/SiteFooter.vue'

export default {
  components: {
    SiteHeader,
    SiteFooter
  }
}
</script>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

Answer 1

您可以使用 $emit 函数来实现。

内部子组件：

$emit('custom-event', 'my value')

然后在你的父级中你可以监听这个事件并捕获值。

@custom-event="myMethod"

还有一个方法：

methods: {
    myMethod (value) {
        console.log(value);
    }
}

这应该记录 'my value'

您可以在此处阅读有关自定义事件的更多信息：

https://vuejs.org/v2/guide/components-custom-events.html

Answer 2

Vue 使用单向数据流。因此无法更新数据 "from below".

解决方法是使用命名槽。

所以你的布局应该是这样的


<template>
    <h1><slot name="author">Here is a default (fallback) content that would be replaced with content passed into slot. And it is optional.</slot></h1>
    <slot/> <!-- this is a default slot -->
</template>

你的页面组件应该看起来像

<template>
  <Layout>
    <template v-slot:author>author here</template>
    <h1>About us</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.</p>
  </Layout>
</template>

如何在 VueJS / Gridsome 中向页面添加自定义属性

How to add custom properties to a page in VueJS / Gridsome

vue.js

gridsome