vue 父子参数传递

定义子函数filmnav.vuehe 负函数film.vue

在film.vu中代码如下：

<template>
    <div>
        <h3>演职人员</h3>
         <detailswiper pview="3" swipername="detail_actor">  // 通过 pview，swipername实现相同子函数传递不同参数
             <div class="swiper-slide" v-for="(d,index) in data.actors" :key="index">
                 <!--<p>{{d.avatarAddress}}</p>-->
                 <img :src="d.avatarAddress" >
             </div>  //渲染到子函数  子函数中在需要渲染的位置添加<slot></slot>

         </detailswiper>
        <h3>剧照</h3>
         <detailswiper pview="2" swipername="detail_photo"> // 通过 pview，swipername实现相同子函数传递不同参数
             <div class="swiper-slide" v-for="(d,index) in data.photos" :key="index">
                 <!--<p>{{d.avatarAddress}}</p>-->
                 <img :src="d" >
             </div>
         </detailswiper>
    </div>
</template>

<script>
    import detailswiper from '@/views/Detail/DetailSwiper'  //引进子函数
    export default {
        data(){
          return{
              data:null,
          }
        },
        components:{

            detailswiper,  // 调用子函数
        },

    }
</script>

子函数代码如下：

<template>

    <div :class="'swiper-container '+swipername ">  // 通过此方式获取父任务传来的参数
        <div class="swiper-wrapper">
            <slot></slot>
        </div>

    </div>

</template>

<script>
    import Swiper from 'swiper'
    // import 'swiper/dist/css/swiper.min.css'
    import 'swiper/swiper-bundle.css' //新的swiper引入方式
    export default {
        props:['pview','swipername'], //获取父任务传递的参数  使用this.pview 调用
        mounted() {
           console.log('detailfilmer');
            new Swiper('.'+this.swipername, {  //调用传来的class参数
            slidesPerView: this.pview,
            spaceBetween: 5,
            freeMode:true,
                });
            }
    }
</script>