Question

我正在研究Vue / Gridsome项目，想知道如何将T中的变量导出到其父级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

Answer 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

Answer 2

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>

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

2 个答案: