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; width: 100%; z-index: 1000; } .swiper-table >>> .swiper-pagination-bullet-active { background: #d31145 !important; /* width: .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>
