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

Posted

技术标签:

【中文标题】使用 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

【讨论】:

以上是关于使用 Inertia JS 从嵌套布局中控制 Vue 组件的主要内容,如果未能解决你的问题,请参考以下文章

使用 Vue.Js / Inertia.js 和 Laravel 对结果进行分页

Laravel 8 + Inertia 不渲染变量

使用 laravel Inertia JS Vuetify DataTable

如何使用 Laravel 8、Inertia.js 和 Vue3 定义全局变量?

在 Inertia.js Vue 文件中访问 Laravel 的 .env 变量

如何使用 Inertia::render 将某个模型的关系显示在表格中?