时间戳

首页 > 解决方案 > 使用 Inertia JS 从嵌套布局中控制 Vue 组件

vue.js - 使用 Inertia JS 从嵌套布局中控制 Vue 组件

问题描述

我正在使用使用 Vue 和嵌套布局的 Inertia JS。

我的主要布局如下所示：

<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 对文档页面标题所做的，如上例所示。

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

标签： vue.jslayoutvue-componentinertiajs

解决方案

如果您尝试将信息从子组件传递到父组件（例如标题），则可以使用$emit.

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

推荐阅读