Question

所以基本上我的主页上有这样的东西

<template>
  <div id="body">
    <sideBar :menu="menu" :tableName='tableName' titleOfPage='titleOfPage'></sideBar>
    <div id="menu">
      HOME PAGE
    </div>
  </div>
</template>

在侧边栏模板中，您可以选择页面。它将向您转发此模板

<template>
  <div id="body">
    <sideBar :menu="menu" :tableName='tableName' :titleOfPage='titleOfPage'></sideBar>
    <div id="main">
      <h1>{{ titleOfPage }}</h1>
    ....

我需要侧边栏模板来设置titleOfPage，因为它与单击的页面相对应。我尝试了不同的方法，但是没有解决。感谢您向我解释如何解决此问题。

Answer 1

Vue docs建议不要直接使用$router，而是将props配置为传递给路由组件：

const routes = [
  { path: '/', redirect: '/page-a', component: { template: `<router-view></router-view>` }, name: 'Home' },
  { path: '/page-a', component: Page, props: { titleOfPage: 'Page A' }},
  { path: '/page-b', component: Page, props: { titleOfPage: 'Page B' }},
];

如果道具是动态的并且依赖于当前路线，则可以将函数传递给每个路线配置的props属性：

{ path: '...', component: ..., props: (route) => ({ query: route.query.q }) }

要解决您的问题，您只需创建一个页面组件即可从路由器接收道具并在其模板中呈现sidebar组件：

<!-- template for page component -->
<template>
  <div id="body">
    <sideBar :menu="menu" :tableName='tableName' :titleOfPage='titleOfPage'></sideBar>
    <div id="main">
      <h1>{{ titleOfPage }}</h1>
      <!-- ... -->
    </div>
  </div>
</template>

演示： stackblitz

从Vue中的嵌套模板获取值

1 个答案: