0

我正在开发一个 Vue / Gridsome 项目，想知道如何将变量从 a 中导出Page到它的 parent 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>
4

2 回答 2

1

您可以使用该$emit功能来实现这一点。

内部子组件：

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

然后在您的父母中，您可以侦听此事件并捕获该值。

@custom-event="myMethod"

并使用一种方法：

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

这应该记录“我的价值”

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

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

于 2019-12-24T14:04:45.430 回答
0

Vue 使用单向数据流。因此，无法“从下方”更新数据。

解决方法是使用命名插槽。

所以你的布局应该看起来像


<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>
于 2019-12-24T14:10:29.360 回答