在Vue建立的工程中通常是以组件为单位,进行模块开发的,比如音乐组件,图片组件等。
现在有一个需求是在音乐界面实现,音乐图片的轮播图,在图片界面实现图片的轮播图。
那么我们可以将轮播图这一个组件剥离开,设定成一个单独的组件,在音乐组件使用轮播组件,图片组件中也使用轮播组件。
1、 先建立轮播组件:.lunbotu.vue
<template>
<!-- 轮播图子组件 将轮播图组件单独分离开,因为在music界面和image界面都需要-->
</template>
<script>
export default {
}
</script>
<style>
</style>
2、编写轮播图组件的相关界面和逻辑
<template>
<!-- 轮播图子组件 将轮播图组件单独分离开,因为在music界面和image界面都需要-->
<!--使用了element-ui的轮播图-->
<div class="block">
<el-carousel height="1000px">
<el-carousel-item v-for="item in lunbotuList" :key="item">
<img :src="item">
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
data(){
return{.....}
},
methods:{.....}
props:["lunbotuList"] //使用props告诉父组件,子组件需要的数据是lunbotuList
}
</script>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
img{
height: 100%;
width: 100%
}
</style>
3、在music.vue和image.vue中使用子组件
既然涉及到了父组件和子组件,且子组件已经指定了props,就涉及到了父组件向子组件传值,只有子组件拿到父组件的值,才能进行操作。
①子组件使用props:["data"]-----告诉父组件,我需要的数据名交data
②父组件在使用子组件的过程中使用<子组件html引用名 :data="parentData"
在Vue建立的工程中通常是以组件为单位,进行模块开发的,比如音乐组件,图片组件等。
现在有一个需求是在音乐界面实现,音乐图片的轮播图,在图片界面实现图片的轮播图。
那么我们可以将轮播图这一个组件剥离开,设定成一个单独的组件,在音乐组件使用轮播组件,图片组件中也使用轮播组件。
1、 先建立轮播组件:.lunbotu.vue
<template>
<!-- 轮播图子组件 将轮播图组件单独分离开,因为在music界面和image界面都需要-->
</template>
<script>
export default {
}
</script>
<style>
</style>

2、编写轮播图组件的相关界面和逻辑
<template>
<!-- 轮播图子组件 将轮播图组件单独分离开,因为在music界面和image界面都需要-->
<!--使用了element-ui的轮播图-->
<div class="block">
<el-carousel height="1000px">
<el-carousel-item v-for="item in lunbotuList" :key="item">
<img :src="item">
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
data(){
return{.....}
},
methods:{.....}
props:["lunbotuList"] //使用props告诉父组件,子组件需要的数据是lunbotuList
}
</script>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
img{
height: 100%;
width: 100%
}
</style>

3、在music.vue和image.vue中使用子组件
既然涉及到了父组件和子组件,且子组件已经指定了props,就涉及到了父组件向子组件传值,只有子组件拿到父组件的值,才能进行操作。
3.1、父组件使用import 子组件 from "url"来引入子组件
import lunbotu from "./lunbotu.vue"
3.2、父组件注册子组件,在父组件的components中注册子组件:
components:{
lunbotu
}
传值的过程为:
①子组件使用props:["data"]-----告诉父组件,我需要的数据名交data
②父组件在使用子组件的过程中使用<子组件html引用名 :data="parentData"></子组件html引用名>来向子组件传递数据,parentData是父组件中的数据
3.3、父组件使用子组件并传值:
<lunbotu :data="parentData"></lunbotu>
在传值的过程中不要忘记对父组件的parentData数据进行格式化,不然,就会输出数据错误。
例如:在music.vue中需要轮播的图片数据为:musicList.img,那么parentData=musicList.img
在image.vue中需要轮播的图片数据为:imageList.url,那么parentData=imageList.url