场景

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

实现

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">查看该榜单&gt;</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);})}

最终效果

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

VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
父组件传值给子组件子组件向父组件传值的方法
父组件传值给子组件: 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后创建一个名为message的属性 3.在App. ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
利用v-model实现父子组件传值——子父组件同步更新
v-model介绍 v-model 是Vue的一个很大的特色,可以实现双向数据绑定.v-model本质上是语法糖,它负责监听用户的输入事件以更新数据. v-model 在内部使用不同的属性为不同的输入 ...
Vue2的自行封装胶囊图组件，通过父组件传值给子组件来改变数值和样式
通过父组件传值给子组件来改变数值和样式胶囊图组件,子组件占比的百分比就是宽度,在写样式即可父组件代码块传变量变量前要加冒号才是表达式 <template><div>< ...
React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件定义一个组件最简单的方式是使用JavaS ...
react中类组件传值，函数组件传值：父子组件传值、非父子组件传值
父子组件传值.非父子组件传值: 类组件传值父子组件传值子传父: 子组件:事件的触发sendMsg=()=>{this.props.person();}父组件:<Child per ...
父组件给子组件传值，子组件在mounted里面打印为空
父组件给子组件传值,子组件在mounted里面打印为空第一种:使用v-if ,等到父组件传值不为空时再传入 https://www.cnblogs.com/huancheng/p/9636595.h ...
Vue.js 父组件向子组件传值和子组件向父组件传值
父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>// 创建 Vue 实例,得到 ViewModelvar vm = new ...

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

场景

实现