vue实现字体跟着banner轮播变化

要实现的效果：banner轮播的时候顶部导航也跟着banner变颜色，这里我的头部导航跟banner是两个组件，swiper用的是v3的。

  mounted() {
    let that = this;
    new Swiper(".swiper-container", {
      loop: true,
      // 如果需要分页器
      pagination: ".swiper-pagination",
      // 如果需要前进后退按钮
      // nextButton: '.swiper-button-next',
      // prevButton: '.swiper-button-prev',
      // 如果需要滚动条
      // scrollbar: '.swiper-scrollbar',
      //如果需要自动切换海报
      autoplay: 5000, //时间 毫秒
      autoplayDisableOnInteraction: false, //用户操作之后是否停止自动轮播默认true
      onSlideChangeStart: function (swiper) {
        // console.log("轮播")
        if ((swiper.activeIndex - 1 + 3) % 3 == 0) {
          console.log((swiper.activeIndex - 1 + 3) % 3);
          swiper.stopAutoplay(); //禁止轮播
        }
        if ((swiper.activeIndex - 1 + 3) % 3 == 0) {
          //判断swiper当前的下标
          //因为swiper的特性，所以判断下标不能直接取，需要一些方法
          that.fontColor = "color : black";
          that.borderColor = "border: 1px solid rgba(255, 255, 255, 0.5)";
        } else if ((swiper.activeIndex - 1 + 3) % 3 == 1) {
          that.fontColor = "color : rgba(255, 255, 255, 0.7)";
          that.borderColor = "border: 1px solid rgba(255, 255, 255, 0.5)";
        } else {
          that.fontColor = "color : black";
          that.borderColor = "border: 1px solid rgba(0, 0, 0, 0.5)";
        }
        bus.$emit("sendBybus", that.fontColor);//将颜色传给header
        bus.$emit("sendColor", that.borderColor);
      },
    });
  },