Vue.js 如何在VueJS/Gridsome中将自定义属性添加到页面

我正在从事一个Vue/Gridsome项目，想知道如何将

页面中的变量导出到它的父
布局中

这是我的页面代码：

<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>

您可以使用
$emit
函数来实现这一点

内部子组件：

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

然后在父级中，您可以侦听此事件并捕获值

@custom event=“myMethod”

用一种方法：

方法：{
myMethod（值）{
console.log（值）；
}
}

这应该记录“我的价值”

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

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

解决方法是使用命名插槽

所以你的布局应该是


这里是一个默认（回退）内容，它将被传递到插槽中的内容替换。它是可选的。

您的页面组件应该如下所示


作者在这里
关于我们
Lorem ipsum dolor sit amet，奉献精英。错误：所有人都是动物，所有人都有生命，所有人都有生命，所有人都有生命，所有人都有生命，所有人都有生命！尤斯托

Imo插槽是实现此功能的更好方法。它将所有数据保存在一个位置。这很有效，谢谢：）好奇是否有一种解决方法可以将布局上插槽的动态内容传递到布局上的组件属性中？您可以将任何您想要的内容放置在插槽中-其他组件/道具/计算/方法输出。我的意思是有效地将插槽放置在组件中道具因此道具读取插槽输出。
$emit('custom-event', 'my value')