vue中组件间参数传递和路由传参，div标签实现可复用组件超出屏幕横向滚动效果

router-link方式传参

1. router 中的index.js 配置路由
   
2. 组件中跳转传参

:to="{name:‘MusicPlay’,params:{songid:item.song_id}}"

 <router-link tag="div" :to="{name:'MusicPlay',params:{songid:item.song_id}}" class="card url" v-for="(item,index) in todayRecommend" :key="index">
                    <div class="album">
                        <img :src="item.pic_big" :alt="item.title">
                        <div class="name">{{ item.title }}</div>
                    </div>
                </router-link>

3. 目标页面接收参数

this.$route.params.songid

        <LRC :durationTime="durationTime" :currentTime="currentTime" :songid="this.$route.params.songid"/>

父组件传参给子组件

1. 父组件传递参数== :sub_type =“sub_type”==

 <!-- 引用子组件并给子组件传递参数sub_type -->
         <HorizShowList :sub_type="sub_type"></HorizShowList>

// 引入子组件
import HorizShowList from "@/components/Horiz_Show_List"

 components: {
   //   注册组件
    HorizShowList,
  },

2. 子组件通过props接收参数

 //    接收父级传来的参数，通过名字匹配 sub_type
   props:{
      sub_type:{
         type:[String,Number],
         default:24
      }

   },

 var url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+==this.sub_type==+"&size=8&offset=0";

子组件传参给父组件

通过 == this.$emit(‘key’,value)

1. 子组件发送数据 $emit(‘son_click’,item.title)

<div class="container" @click="$emit('son_click',item.title)">
               <img :src="item.album_1000_1000" :alt="item.pic_big">
               <div>{{item.author}}</div>
           </div>

2. 父组件接收数据 @son_click

 <HorizShowList @son_click="getMusicTitle" ></HorizShowList>

methods:{
     getMusicTitle(data){
        this.title = data;
     }
  }
}

div标签实现可复用组件超出屏幕横向滚动效果

1. 子组件 HorizShowList

<template>
   <div class="scroller">
      <div class="item_container"   v-for="(item,index) in list_desc " :key="index">
           <div class="container" @click="$emit('son_click',item.title)">
               <img :src="item.album_1000_1000" :alt="item.pic_big">
               <div>{{item.author}}</div>
           </div>
      </div>
       
   </div>
</template>

<script>
export default {
   name: 'HorizShowList',
   data() {
       return {
          list_desc:[]
       }
   },
   //    接收父级传来的参数，通过名字匹配 sub_type
   props:{
      sub_type:{
         type:[String,Number],
         default:24
      }

   },
   mounted(){
     var url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+this.sub_type+"&size=8&offset=0";
     this.$axios.get(url)
      .then(res =>{
         this.list_desc = res.data.song_list
         console.log('请求结果：'+JSON.stringify(res.data.song_list));
         
      })
      .catch(error => {
          console.log(error);
          
      })
   },
  
}
</script>

<style  scoped >
.scroller{
   width: 100%;
   height: 100%;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   flex-flow: row nowrap;
   justify-items: center;
   align-items: center;
   overflow-x: scroll;
   list-style: none;
}
.item_container{
   width: 5.333333rem;
   height: 100%;
   display: flex;
   margin: 0 10px;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   list-style: none;
}
.container{
   width: 4.8rem;
   height: 100%;
   display: flex;
   margin: 0 auto;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   list-style: none;
  
}
</style>

2. 父组件 artists

<template>
   <div class="index">
      <div class="title"><p>(子组件传来参数)当前歌曲名：</p><span>{{this.title}}</span></div>
      <div class="floating_container">
         <!-- 引用子组件并给子组件传递参数 sub_type -->
         <HorizShowList @son_click="getMusicTitle" :sub_type="sub_type"></HorizShowList>
      </div>
   </div>
</template>

<script>

// 引入子组件
import HorizShowList from "@/components/Horiz_Show_List"

export default {
   name: '',
   data() {
       return {
          sub_type:2,
          title:""
       }
   },
  components: {
   //   注册组件
    HorizShowList,
  },
  methods:{
     getMusicTitle(data){
        this.title = data;
     }
  }
}
</script>

<style scoped >
.index{
   width: 100%;
   height: 100vh;
   background: orange
}
.title{
   
   width: 100%;
   height: 50px;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-items: center;
   top: 400px;
}
p{
   font-size: 12pt;
   color: beige;

}
.floating_container{
   position: fixed;
   bottom: 0.533333rem;
   left: 50%;
   transform: translateX(-50%);
   background: white;
   width: 90%;
   height: 9.333333rem;
   border-radius: 0.266667rem;
}

</style>

PS: 超出布局自动换行： flex-wrap: wrap;

项目地址

项目访问地址：http://47.93.205.239/#/artists
演示效果，在手机端打开或者浏览器按F12体验