Vue建立的工程中组件中复用组件

  在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