[英]VueJS How to pass props between two components using <router-view>
I'm new to vue.js
and I'm tryeing to build a little application, where I in one case need to pass a prop between two components.我是
vue.js
的新手,我正在尝试构建一个小应用程序,在一种情况下,我需要在两个组件之间传递一个 prop。 For some reason it does not work and I don't know why.由于某种原因它不起作用,我不知道为什么。
Here is the first component, the Playlist.Vue component:这是第一个组件,Playlist.Vue 组件:
<template>
<div class="playlists-con">
<div class="playlists">
<h1>Available Playlists for category: {{id}}</h1>
<ul>
<router-link v-for="playlist in playlists" :to="`details/${playlist.id}`" tag="li" active-class="active" exact>
<div class="playlist-wrapper">
<div class="imgWrap">
<img :src="playlist.images[0].url" />
</div>
<a>{{playlist.name}}</a>
</div>
</router-link>
</ul>
</div>
<div>
<router-view category="id"></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
id: this.$route.params.id,
playlists : []
}
},
watch: {
'$route'(to, from) {
this.id = to.params.id
}
},
methods: {
fetchPlaylist() {
this.$http.get('' + this.id + '/playlists')
.then(response => {
return response.json()
})
.then(data => {
const playlist_items = data.playlists.items;
for (let key in playlist_items) {
this.playlists.push(playlist_items[key])
}
})
}
},
created() {
this.fetchPlaylist();
}
}
</script>
from the Playlist component, I'm supposed to be able to get to the Playlist details.从播放列表组件,我应该能够获得播放列表的详细信息。 I also want to pass the category prop to the PlaylistDetails.vue, so I tried to do
<router-view category="id"></router-view>
- but that does not work.我还想将类别道具传递给 PlaylistDetails.vue,所以我尝试执行
<router-view category="id"></router-view>
- 但这不起作用。
PlaylistDetails.vue component (where I want to display the category prop, passed from the Playlist.vue component) : PlaylistDetails.vue 组件(我想显示类别道具,从 Playlist.vue 组件传递):
<template>
<div class="playlist-details">
<router-link :to="`/categories/${category}`">Go to playlists</router-link>
<h1>Playlist Details for Playlist: <span class="playlist-name">{{playlistName}}</span></h1>
<h1>category: {{ category }}</h1>
<ul>
<li v-for="track in tracks">
<p>{{ track.track.artists[0].name}} - {{ track.track.name }}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['category'],
data() {
return {
id: this.$route.params.id,
tracks : [],
playlistName: ''
}
},
watch: {
'$route'(to, from) {
this.path = from.params.path
}
},
beforeRouteEnter(to, from, next) {
if (true) {
next();
} else {
next(false);
}
},
methods: {
fetchPlaylistDetails() {
this.$http.get('https://api.spotify.com/v1/users/spotify/playlists/' + this.id)
.then(response => {
return response.json()
})
.then(data => {
const playlist_tracks = data.tracks.items;
for (let key in playlist_tracks) {
this.tracks.push(playlist_tracks[key])
}
this.playlistName = data.name;
})
}
},
created() {
this.fetchPlaylistDetails();
}
}
</script>
What am I doing wrong?我究竟做错了什么?
UPDATE更新
Here is my router configuration:这是我的路由器配置:
export const routes = [
{
path: '', default: App
},
{
path: '/categories/:id/playlists', props: true, component: Playlists
},
{
path: '/categories/:id/details/:id', component: PlaylistDetails, props: true, beforeEnter: (to, from, next) => {
next();
}},
{path: '*', redirect: '/'}
]
You are half way there, you defined props:true
on the route, which means every dynamic property that is matched in the url would be passed as a prop, so :您已经完成了一半,您在路由上定义了
props:true
,这意味着在 url 中匹配的每个动态属性都将作为 prop 传递,因此:
//this will pass 'id' as a prop to the playlist component
{
path: '/categories/:id/playlists', props: true, component: Playlists
},
So inside the playlist component you'll have this:因此,在播放列表组件中,您将拥有以下内容:
props: ['id'],
data() {
return {
playlists : []
}
},
The same is true for the details component:细节组件也是如此:
//change the name of the param to distinguish it from the category id
{
path: '/categories/:id/details/:detailsId', component: PlaylistDetails, props: true, beforeEnter: (to, from, next) => {
next();
}},
And in PlaylistDetails.vue:在PlaylistDetails.vue 中:
props: ['detailsId'],
....
methods: {
fetchPlaylistDetails() {
this.$http.get('https://api.spotify.com/v1/users/spotify/playlists/' + this.detailsId)
.then(response => {
return response.json()
})
.then(data => {
const playlist_tracks = data.tracks.items;
for (let key in playlist_tracks) {
this.tracks.push(playlist_tracks[key])
}
this.playlistName = data.name;
})
}
},
There're 2 ways to pass data between non-parent components.有两种方法可以在非父组件之间传递数据。 I would recommend to take a look at them, before trying solve issue with
router-view
:在尝试使用
router-view
解决问题之前,我建议先看看它们:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.