使用惯性JS从嵌套布局控制Vue组件

Question

我使用惯性JS使用Vue和嵌套布局。

我的主布局看起来像这样:

<template>
<div>
<app-bar title="App title" type="back|dismiss|sidebar">
<!-- Slot for icons in the top right corner -->
</app-bar>
<slot />
</div>
</template>

一个AppBar组件，接受一个标题，一个带有后退图标、解散图标或边栏图标的链接，以及一个插槽(可选)来提供与当前页面相关的图标链接。

<script>
import Layout from '@/Pages/Messenger/Layout';
export default {
metaInfo: { title: 'Report new problem' },
layout: [Layout],
...

</script>

这是一个嵌套在布局中的页面。

所以我的问题是:从嵌套页面控制AppBar的props和slot的最佳/首选方法是什么?

有点像你在Laraval中使用Blade模板，或者像Vue Meta在上面的例子中为文档页面标题所做的那样。

也许这甚至不是最好的方法，在这种情况下也告诉我:)

Answer 1

如果您试图将信息从子组件传递给父组件，例如标题，您可以使用$emit。

这是一篇描述如何做的文章:https://hvekriya.medium.com/pass-data-from-child-to-parent-in-vue-js-b1ff917f70cc另一个SO问题:https://stackoverflow.com/a/52479745/4517964

Answer 2

我发现将数据传递给持久布局的快速方法是:

使用:

layout: (h, page) => { return h(Layout, () => page) }

代替:

layout: Layout,

在父布局中你可以使用this.$slots.default()[0]

访问子布局