vue中使用swiper做轮播页面，标题样式随着轮播页面改变而改变

vue中使用swiper做轮播页面，标题样式随着轮播页面改变而改变

知识点: 标题组件与轮播组件之间交互（vue兄弟组件之间传值）

兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据

1、创建一个Vue的实例，让各个兄弟共用同一个事件机制。

2、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。

3、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

实例如下：

我们可以创建一个单独的js文件eventVue.js,内容如下

import Vue from 'vue';
 
export default new Vue();

　　

整个文件这两句就够啦！！！！

标题组件

子组件1

• 文件名： nav.vue

<template>
  <div class="nav-container">
    <ul style="padding: 0">
      <li v-for="(item, index) in newBreadcrumb" 
      :key="index"
      :class="nowIndex===index ? 'selected-nav nav-title':'unselected-nav nav-title'">
      {{item.name}}
      <span class="line">/</span>
      </li>
    </ul>
  </div>
</template>
<script>
import eventHub from '../../../../commonJS/eventVue.js'
export default {
  props:['breadcrumb'],
  data(){
    return {
      newBreadcrumb: [],
      nowIndex: 0,
    }
  },
  created(){
    console.log("breadcrumb", this.breadcrumb) //父子组件传值，传过来一个标题数组
    //对数组进行处理，转为数组对象，给原数组成员加了key，为name
    for(let i in this.breadcrumb){
      let breadcrumbObject = {}
      this.$set(breadcrumbObject, 'name', this.breadcrumb[i] )
      this.newBreadcrumb.push(breadcrumbObject)
    }
    
  },
  mounted(){
    //nav组件接收swiper组件滑动时传过来的index
    eventHub.$on('slideTab', (index)=>{
      this.nowIndex = index
    });
  },
}
</script>
<style>
.nav-container {
  font-size: 0;
  padding: .2rem 0 0 .2rem;
}
.nav-title {
  font-family: "DINPro-Medium";
  font-size: 0.18rem;
}
li {
  display:inline-block;
}
.nav-title:nth-child(3) .line{
  display: none;
}
.selected-nav {
  color: #554344;
}
.unselected-nav {
  color: #B8B8B8;
}
</style>

子组件2

• 文件名： swiper.vue

<template>
  <div router>
    <div v-for="(route, index) in $router.options.routes" :key="index">
          <!-- {{route.name}} -->
      <div v-if="route.name === 'CompetitionObjective'">
        <template v-for="(items, index) in route.children">
            <swiper
            :key="index"
            v-if="items.path === 'MRtableAssociation/'"
            :options="swiperOption"
            ref="mySwiper"
            >
            <swiper-slide
                v-for="(item, index) in items.children"
                :key="index"
                class="mdrt-item"
            >
                <keep-alive>
                <component :is="item.component" v-bind:MDRTcompetitionCd="MDRTcompetitionCd" v-if="MDRTcompetitionCd.length>0"></component>
                </keep-alive>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import eventHub from '../../../../commonJS/eventVue.js'
export default {
  props:{
    MDRTcompetitionCd: {
      type: String,
      default: ""
    }
  },
  data(){
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        },
      }
    }
  },
  mounted() {
      var mySwiper = this.$refs['mySwiper'][0].swiper
      mySwiper.on('slideChange', () => { // 监控滑动后当前页面的索引，将索引发射到导航组件
      // 左右滑动时将当前slide的索引发送到nav组件,eventHub是兄弟组件之间传值的桥梁
      eventHub.$emit('slideTab', mySwiper.activeIndex);
    });
  }
}
</script>
<style scoped>
.swiper-table {
  height: 3.65rem;
  border-top: 0.01rem solid #d8d8d8;
}

.swiper-table >>> .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: -0.2rem;
  left: 0;
   100%;
  z-index: 1000;
}
.swiper-table >>> .swiper-pagination-bullet-active {
  background: #d31145 !important;
  /*  .34rem !important; */
}
.mdrt-item {
  font-family: 'DINPro-Medium';
  font-size: .18rem;
  color: #554344 !important;
} 
</style>

父组件：

关键代码

<v-nav :breadcrumb='breadcrumb' v-if="breadcrumb.length > 0"></v-nav>
<v-swiper :MDRTcompetitionCd='MDRTcompetitionCd'></v-swiper>

　　

如有问题欢迎指正：qq: 1534147975