在具有多个组件的 Vue Router 中传递道具

Question

如果在特定路由上，我正在尝试将 prop 传递给路由器中的组件。

发现的所有教程只使用一个组件，因此可以简单地将道具附加到列表中。

但是对于多个组件它不起作用。

name: "Room",
  components: {
    navbar: TitleRooms,
    content: Room,
    props: {
        title: "message"
      }
  }

我试过了，但它什么也没做。

name: "Room",
  components: {
    navbar: {
      TitleRooms,
      props: {
        title: "message"
      }
    },
    content: Room
  }

这个我也试过了，还是不行。

是否可以选择使用多个嵌套的命名路由器视图正确执行此操作？

Answer 1

实际上你的路由渲染房间组件，所以这个接收参数。当然 Navbar 可以接收它的 props，但是你应该通过 template 来接收它。做：

<navbar :title="title" />

将 Room 组件（从路由参数）中的 this.title 绑定到 Navbar

Answer 2

据我所知，您正在尝试这样做：

name: "Room",
components: {
  navbar: TitleRooms,
  content: Room
},
props: {
  navbar: {
    title: "message"
  },
  content: false
}

这应该将值 "message" for the proptitletoTitleRooms. It won't pass any props toRoom. If you want to pass props to both components you can just change thefalse` 传递给包含所需道具的适当对象。

在具有多个组件的 Vue Router 中传递道具

Pass props in Vue Router with multiple components

vue.js

vue-props