vue make use swiper page carousel, carousel page with a heading style change change

Knowledge: interactive (by value between vue brothers components) between the title and the carousel assembly components

Data transfer between the brothers need the help of event vehicle, the transfer of data by way of the car event

1, create an instance of the Vue, let each brother share the same event mechanism.

2, transfer data side, triggered by a bus event. $ Emit (the method name, transfer data).

3, the data receiving side, through mounted () {} trigger bus. ({Data received over the data transfer to the assembly} method name, function (parameter received data)) $ ON, in this case the function has occurred the change, you can use the arrow functions.

Examples are as follows:

We can create a separate js file eventVue.js, reads as follows


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

These two entire file enough friends! ! ! !

Component title

Subassembly 1

File name: 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>

Subassemblies 2

File name: 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>

Parent component:

Key Code

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