使用 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 Inertia JS Vuetify DataTable
如何使用 Laravel 8、Inertia.js 和 Vue3 定义全局变量?