文章/答案/技术大牛

发布

社区首页 >问答首页 >从vue中的嵌套模板中获取值

问从vue中的嵌套模板中获取值
EN

Stack Overflow用户

提问于 2018-08-17 15:54:54

回答 1查看 45关注 0票数 1

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

<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，因为它对应于所点击的页面。我尝试了不同的方法，但没有成功。我很感谢你的帮助，向我解释了如何解决这个问题。

vue.js

vuejs2

回答 1

Stack Overflow用户

发布于 2018-08-17 19:22:24

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51890750

复制

相似问题

问从vue中的嵌套模板中获取值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从vue中的嵌套模板中获取值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从vue中的嵌套模板中获取值
EN