在具有多个组件的 Vue Router 中传递道具
Pass props in Vue Router with multiple components
如果在特定路由上,我正在尝试将 prop 传递给路由器中的组件。
发现的所有教程只使用一个组件,因此可以简单地将道具附加到列表中。
但是对于多个组件它不起作用。
name: "Room",
components: {
navbar: TitleRooms,
content: Room,
props: {
title: "message"
}
}
我试过了,但它什么也没做。
name: "Room",
components: {
navbar: {
TitleRooms,
props: {
title: "message"
}
},
content: Room
}
这个我也试过了,还是不行。
是否可以选择使用多个嵌套的命名路由器视图正确执行此操作?
实际上你的路由渲染 房间 组件,所以这个接收参数。当然 Navbar 可以接收它的 props,但是你应该通过 template
来接收它。做:
<navbar :title="title" />
将 Room 组件(从路由参数)中的 this.title
绑定到 Navbar
据我所知,您正在尝试这样做:
name: "Room",
components: {
navbar: TitleRooms,
content: Room
},
props: {
navbar: {
title: "message"
},
content: false
}
这应该将值 "message" for the prop
titleto
TitleRooms. It won't pass any props to
Room. If you want to pass props to both components you can just change the
false` 传递给包含所需道具的适当对象。
如果在特定路由上,我正在尝试将 prop 传递给路由器中的组件。
发现的所有教程只使用一个组件,因此可以简单地将道具附加到列表中。
但是对于多个组件它不起作用。
name: "Room",
components: {
navbar: TitleRooms,
content: Room,
props: {
title: "message"
}
}
我试过了,但它什么也没做。
name: "Room",
components: {
navbar: {
TitleRooms,
props: {
title: "message"
}
},
content: Room
}
这个我也试过了,还是不行。
是否可以选择使用多个嵌套的命名路由器视图正确执行此操作?
实际上你的路由渲染 房间 组件,所以这个接收参数。当然 Navbar 可以接收它的 props,但是你应该通过 template
来接收它。做:
<navbar :title="title" />
将 Room 组件(从路由参数)中的 this.title
绑定到 Navbar
据我所知,您正在尝试这样做:
name: "Room",
components: {
navbar: TitleRooms,
content: Room
},
props: {
navbar: {
title: "message"
},
content: false
}
这应该将值 "message" for the prop
titleto
TitleRooms. It won't pass any props to
Room. If you want to pass props to both components you can just change the
false` 传递给包含所需道具的适当对象。