父组件改变子组件的值

性野喜悲

于 2023-02-14 17:43:01 发布

阅读量683

点赞数

分类专栏： vue 经验分享文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/leng0920/article/details/129030107

版权

经验分享同时被 2 个专栏收录

146 篇文章 1 订阅

订阅专栏

vue

133 篇文章 4 订阅

订阅专栏

子组件：com-tab.vue

<template>
  <div class="flex-between">
    <div
      :style="{ width: item.width + 1 + 'rem', height: fatherBoxHeight + 'rem' }"
      v-for="(item, index) in tabCont"
      :key="index"
      @click="changeTab(index,item)"
    >
      <div
        class="com-tab"
        :style="{ width: item.width + 1 + 'rem', height: fatherBoxHeight + 'rem' }"
      >
        <div class="blue-box">
          <div
            class="blue-cont"
            :style="{ width: item.width + 'rem', height: boxHeight + 'rem' }"
          ></div>
        </div>
        <div class="white-box" :class="{ active: tabIdx == index }">
          <div
            class="white-cont"
            :style="{ width: item.width + 'rem', height: boxHeight + 'rem' }"
            :class="{ activeCont: tabIdx == index }"
          >
            <div
              class="tab-cont-item flex-center"
              
            >
              {{ item.text }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  components: {},
  props: {
    boxHeight: {
      type: Number,
      default: 3.95,//不传默认3.95rem
    },
    tabIdx: {
      type: Number,
      default:0,//不传默认3.95rem
    },
    colorActive: {
      type: Boolean,
      default: false,
    },
    tabCont: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      fatherBoxHeight: 0, // 屏幕高度
    };
  },
  computed: {},
  watch: {},
  methods: {
    changeTab(index,item) {
      this.tabIdx = index;
      // 将选中的下标传给父组件
      this.$emit('changeValue',this.tabIdx,item);
    },
  },
  created() {
   
  },
  mounted() {
    this.fatherBoxHeight = this.boxHeight + 1.5;
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
  <style lang='scss' scoped>
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.com-tab {
  position: relative;
  margin: 0 auto;

  //
  .blue-box {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    z-index: 66;
    padding: 2px; //边框的宽度
    background: linear-gradient(-45deg, transparent 9px, rgba(176, 192, 255, 1) 0);
  }
  .blue-cont {
    background: linear-gradient(-45deg, transparent 8px, #fff 0);
  }
  .white-box {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 77;
    padding: 2px; //边框的宽度
    background: linear-gradient(-45deg, transparent 9px, rgba(176, 192, 255, 1) 0);
    font-size: 1.3rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    letter-spacing: 0.2rem;
  }
  .white-cont {
    background: linear-gradient(-45deg, transparent 8px, #fff 0);
  }
  .active {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 77;
    padding: 2px; //边框的宽度
    background: linear-gradient(-45deg, transparent 9px, rgba(0, 52, 255, 1) 0);
  }
  .activeCont {
    background: linear-gradient(-45deg, transparent 8px, rgba(0, 52, 255, 1) 0);
    color: #ffffff;
  }
  .horizontal-purple-square-position {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9999;
  }
  .tab-cont-item {
    width: 100%;
    height: 100%;
  }

}
</style>

父组件改变了子组件的tabIdx的值：

正确的子组件：com-tab.vue

改动：使用currentIndex接收父组件传过来的tabIdx的值，并在组件内原本直接使用tabIdx的地方替换成currentIndex

<template>
  <div class="flex-between">
    <div
      :style="{ width: item.width + 1 + 'rem', height: fatherBoxHeight + 'rem' }"
      v-for="(item, index) in tabCont"
      :key="index"
      @click="changeTab(index,item)"
    >
      <div
        class="com-tab"
        :style="{ width: item.width + 1 + 'rem', height: fatherBoxHeight + 'rem' }"
      >
        <div class="blue-box">
          <div
            class="blue-cont"
            :style="{ width: item.width + 'rem', height: boxHeight + 'rem' }"
          ></div>
        </div>
        <div class="white-box" :class="{ active: currentIndex == index }">
          <div
            class="white-cont"
            :style="{ width: item.width + 'rem', height: boxHeight + 'rem' }"
            :class="{ activeCont: currentIndex == index }"
          >
            <div
              class="tab-cont-item flex-center"
              
            >
              {{ item.text }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  components: {},
  props: {
    boxHeight: {
      type: Number,
      default: 3.95,//不传默认3.95rem
    },
    tabIdx: {
      type: Number,
      default:0,//不传默认3.95rem
    },
    colorActive: {
      type: Boolean,
      default: false,
    },
    tabCont: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      fatherBoxHeight: 0, // 屏幕高度
      currentIndex:this.tabIdx//currentIndex接收父组件传来的tabIdx值
    };
  },
  computed: {},
  watch: {},
  methods: {
    changeTab(index,item) {
      this.currentIndex = index;
      // 将选中的下标传给父组件
      this.$emit('changeValue',this.currentIndex,item);
    },
  },
  created() {
   
  },
  mounted() {
    this.fatherBoxHeight = this.boxHeight + 1.5;
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
  <style lang='scss' scoped>
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.com-tab {
  position: relative;
  margin: 0 auto;
  //
  .blue-box {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    z-index: 66;
    padding: 2px; //边框的宽度
    background: linear-gradient(-45deg, transparent 9px, rgba(176, 192, 255, 1) 0);
  }
  .blue-cont {
    background: linear-gradient(-45deg, transparent 8px, #fff 0);
  }
  .white-box {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 77;
    padding: 2px; //边框的宽度
    background: linear-gradient(-45deg, transparent 9px, rgba(176, 192, 255, 1) 0);
    font-size: 1.3rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    letter-spacing: 0.2rem;
  }
  .white-cont {
    background: linear-gradient(-45deg, transparent 8px, #fff 0);
  }
  .active {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 77;
    padding: 2px; //边框的宽度
    background: linear-gradient(-45deg, transparent 9px, rgba(0, 52, 255, 1) 0);
  }
  .activeCont {
    background: linear-gradient(-45deg, transparent 8px, rgba(0, 52, 255, 1) 0);
    color: #ffffff;
  }
  .horizontal-purple-square-position {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9999;
  }
  .tab-cont-item {
    width: 100%;
    height: 100%;
  }

}
</style>

immersive.vue使用com-tab.vue

<template>
<div>

        <com-tab :tab-idx="tabIdx" :tab-cont="tabCont" @changeValue="changeValue" ></com-tab>
 <div class="live-panel" v-show="tabIdx == 0">
           tab0内容
          </div>
 <div class="live-panel" v-show="tabIdx == 1">
           tab1内容
          </div>
 <div class="live-panel" v-show="tabIdx == 2">
           tab2内容
          </div>
</div>
</template>
<script>


export default {
  name: 'immersive',
  components: {

    'com-tab': () => import('@/pages/fbec-game/components/com-tab.vue'),//子组件
   
  },
  data() {
 tabCont: [
        { width: 10.1, text: '现场直播' },
        { width: 10.1, text: '视频列表' },
        { width: 10.1, text: '云相册直击' },
      ],
      tabIdx: 1, //选中的tab下标，传给子组件的值
};
  },
  methods: {
    // 获取下标
    changeValue(data) {
      this.tabIdx = data;
    },
}
};