使用 Inertia JS 从嵌套布局中控制 Vue 组件

Posted 2023-02-23

【中文标题】使用 Inertia JS 从嵌套布局中控制 Vue 组件

【英文标题】：Control Vue component from nested layout using Inertia JS

【发布时间】：2021-05-24 17:02:02

【问题描述】：

我正在使用 Inertia 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 的道具和插槽的最佳/首选方式是什么？

有点像您在 Laraval 中使用 Blade 模板或 Vue Meta 对文档页面标题所做的操作，如上例所示。

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

【参考方案1】：

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

在孩子身上

使用这个：

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

代替：

layout: Layout,

在父布局中，您可以使用 this.$slots.default()[0] 访问您的孩子

【参考方案2】：

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

这里有一篇文章描述了如何：https://hvekriya.medium.com/pass-data-from-child-to-parent-in-vue-js-b1ff917f70cc 还有一个 SO 问题：https://***.com/a/52479745/4517964