实例入手Vue-Route给引用组件传值以及实现组件重用

比眉伴天荒 2023-10-18 12:03 13阅读 0赞

## 场景 ##

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

音乐榜单下有个导航页面组件music\_list.vue,它能导航到hot\_list.vue热歌榜页面组件，king\_list.vue King榜页面组件，news\_list.vue新歌榜页面组件，这三个页面组件布局一致，但是请求的数据不同，所以这三个页面都引入了公共组件music\_List.vue，并且各自将请求的url作为参数传递给公共组件。

![Image 1][]![20181201125907228.jpg][]

## 实现 ##

### music\_listnav.vue ###

<template lang="html">
      <div class="music-nav">
        <div class="log url hd">
            <h2>音乐榜单</h2>
            <div>更多</div>
        </div>
        <ul>
          <li>
            <router-link to="/home/hot">热歌榜</router-link>
            <span class="gap-line"> </span>
          </li>
          <li>
            <router-link to="/home/news">新歌榜</router-link>
            <span class="gap-line"> </span>
          </li>
          <li>
            <router-link to="/home/king">King榜</router-link>
            <span class="gap-line"> </span>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
    }
    </script>
    
    <style scoped>
    
    .music-nav{
        background-color: #fff;
        margin-top: 10px;
        padding: 10px 17px;
    }
    
    .hd {
        margin: 14px 0 18px 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    
    .hd h2 {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        margin: 0;
        padding: 0;
        font-size: 20px;
    }
    
    .hd {
        margin-bottom: 0;
    }
    
    ul{
        display: flex;
    }
    
    ul li{
      padding: 18px 0 12px 0;
      font-size: 16px;
      flex: 1;
      text-align: center;
      color: #999;
      position: relative;
      z-index: 2;
    }
    
    ul li a{
      display: block;
    }
    
    ul li a.active{
      color: #299DE7 !important;
    }
    .gap-line {
        position: absolute;
        right: 0;
        top: 20px;
        height: 18px;
        width: 1px;
        border-left: 1px solid #eee;
    }
    
    </style>

### hot\_list.vue 、king\_list.vue、news\_list.vue ###

这三个组件页面代码一致，不同的是传递给公共组件music\_List.vue的url参数不同，进而请求的数据不同。

<template lang="html">
      <div class="">
        <MusicList :url="url" />
      </div>
    </template>
    
    <script>
    
    import MusicList from "../../components/Music_List"
    
    export default {
      data(){
        return{
          url:"要请求的url"
        }
      },
      components:{
        MusicList
      }
    }
    </script>
    
    <style lang="css">
    </style>

### 公共组件music\_List.vue ###

<template lang="html">
      <div class="board panels">
        <div class="panel hotsongs on">
          <ul class="list">
            <li class="song url" v-for="(item,index) in currentData" :key="index">
              <div class="poster">
                <img :src="item.pic_big" :alt="item.title">
              </div>
              <div class="info">
                <div class="name">
                    {
       { item.title }}
                </div>
                <div class="author">{
       { item.artist_name }}</div>
              </div>
            </li>
          </ul>
          <div class="more-songs url">
              查看该榜单>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
          currentData:[]
        }
      },
      props:{
        url:{
          type:String,
          default:""
        }
      },
      mounted(){
        const httpUrl = this.HOST+this.url;
        this.$axios.get(httpUrl)
          .then(res => {
            this.currentData = res.data.song_list
          })
          .catch(error => {
            console.log(error);
          })
      }
    }
    </script>
    
    <style scoped>
    
    .board{
      margin-bottom: 10px;
    }
    
    .panel {
        border-top: 1px solid #eee;
        position: relative;
        top: -1px;
        display: block;
        background: #fff;
    }
    
    .list{
      padding: 20px;
      padding-top: 0;
    }
    
    .panel .list li {
        height: 60px;
        border-bottom: 1px solid #eee;
        padding-left: 0;
        display: flex;
        padding-top: 10px;
    }
    
    .panel .list li .poster {
        position: relative;
        width: 45px;
        margin-right: 8px;
    }
    
    .panel .list li .poster img {
        border: 1px solid #eee;
    }
    .info{
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .info .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        color: #333;
    }
    
    .info .author {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: #999;
        margin-top: 2px;
    }
    
    .more-songs {
        color: #999;
        margin-top: 9px;
        font-size: 12px;
        text-align: center;
        height: 32px;
        line-height: 32px;
    }
    
    
    </style>

### 配置路由 ###

### 打开router下的index.js ###

{
          path: '/',
          name: 'Index',
          redirect:"/home",
          component: Index,
          children:[
            {
              path: 'home',
              component: Home,
              redirect:"/home/hot",
              children:[
                {
                  path:"hot",
                  component:HotList
                },
                {
                  path:"king",
                  component:KingList
                },
                {
                  path:"news",
                  component:NewsList
                }
              ]
            },

home页面本身就是index的子路由，而热歌榜、新歌榜、KIng榜都是home的子路由。

### 讲解 ###

1.在home.vue页面有引入了music\_listnav.vue导航组件，在导航组件中通过router-link以及index.js中的配置实现路由跳转到三个榜单组件。

2.在三大榜单组件中，引入了 公共组件

通过 <MusicList :url= "url"/>给引用的组件 传递一个参数url，而这个参数在

给参数赋值。

export default {
      data(){
        return{
          url:"要赋值的参数"
    
        }

3.公共组件接受参数

在公共组件中通过：

props:{
        url:{
          type:String,
          default:""
        }

来接受传递的参数。

然后将接受的参数作为请求数据的url来请求不同的数据

mounted(){
        const httpUrl = this.HOST+this.url;
        this.$axios.get(httpUrl)
          .then(res => {
            this.currentData = res.data.song_list
          })
          .catch(error => {
            console.log(error);
          })
      }

## 最终效果 ##

![Image 1][]

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][] ###

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181201125857218.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20181201125907228.jpg]: https://img-blog.csdnimg.cn/20181201125907228.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181201130025826.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70