Javascript VueJS如何使用<；在两个组件之间传递道具；路由器视图>；

我是新来的

vue.js

，我正在尝试构建一个小应用程序，在一个例子中，我需要在两个组件之间传递一个道具。由于某种原因，它不起作用，我不知道为什么

这是第一个组件，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>

 //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();
   }},

---

有两种方法可以在非父组件之间传递数据。在尝试使用

路由器视图解决问题之前，我建议先看一下它们：




您已经完成了一半，您在路由上定义了
props:true
，这意味着url中匹配的每个动态属性都将作为prop传递，因此：

//this will pass 'id' as a prop to the playlist component
{
   path: '/categories/:id/playlists', props: true, component: Playlists
},

因此，在播放列表组件中，您将看到：

props: ['id'],
data() {
     return {   
        playlists : []
    }
  },

详细信息组件也是如此：

<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>

 //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();
   }},

并在播放详细信息中。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;
        })
    }
  },

在模板中呈现
category:{{{category}}
时显示什么？@VamsiKrishna Nothing，其为空：-/您的意思是将category绑定到
id
数据属性，如
：category=“id”
而不是
category=“id”
（后者将
category
设置为字符串
“id”
）是的，你是对的！实际上，我尝试过这样做：

：category=“id”，但仍然不起作用：-/您没有使用嵌套路由，

播放详细信息

路由不是

播放列表

的子级。为了在同级组件之间传递数据，您可以做一些事情，例如，您可以将URL中的数据作为查询参数发送。在其他问题中有很多关于这方面的信息，所以我敢肯定。