router-link方式传参
- router 中的index.js 配置路由
- 组件中跳转传参
: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>
- 目标页面接收参数
this.$route.params.songid
<LRC :durationTime="durationTime" :currentTime="currentTime" :songid="this.$route.params.songid"/>
父组件传参给子组件
- 父组件传递参数== :sub_type =“sub_type”==
<!-- 引用子组件并给子组件传递参数sub_type -->
<HorizShowList :sub_type="sub_type"></HorizShowList>
// 引入子组件
import HorizShowList from "@/components/Horiz_Show_List"
components: {
// 注册组件
HorizShowList,
},
- 子组件通过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)
- 子组件发送数据 $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>
- 父组件接收数据 @son_click
<HorizShowList @son_click="getMusicTitle" ></HorizShowList>
methods:{
getMusicTitle(data){
this.title = data;
}
}
}
div标签实现可复用组件超出屏幕横向滚动效果
- 子组件 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>
- 父组件 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体验