vue-商品切换案例

商品切换小案例

思路

1.父组件中定义titles数组
2.利用父传子的方式将titles数组传给子组件
3.子组件中接收，利用v-for指令遍历数组，动态绑定key。
4.添加class，动态绑定class，使点击的那个标题处于活跃状态，利用index和自己定义的currentIndex的关系。
5.props可以限定父组件传过来的值使什么，并添加默认值。
6.通过@click的方式，将index的值通过子传父传递父组件，同时在点击事件传值的同时将index的值赋给currentsIndex。
7.定义contents数组，并再次定义currentIndex，默认值为0。
8.最后监听子组件的传递并执行函数titleCLick，将index的值也赋值给currentIndex，目的是为了让title和content的变化是一致的。

• 代码如下

App.vue

<template>
  <div>
    <tab-control :title="titles" @titleClick="titleClick"></tab-control>
    <h2>{{contents[currentIndex]}}</h2>
  </div>
</template>

<script>
  import TabControl from "./TabControl.vue"

  export default {
    components: {
      TabControl
    },
    data() {
      return {
        titles: ["衣服", "鞋子", "裤子"],
        contents: ["衣服内容", "鞋子内容", "裤子内容"],
        currentIndex: 0
      }
    },
    methods: {
      titleClick(index) { 
        this.currentIndex = index;
      },
    },
  }
</script>

<style scoped>

</style>

TabControl.vue

<template>
  <div class="tab-control">
    <div  v-for="(item ,index) in title"
          :key="index"
          class="tab-control-item"
          :class="{active: currentIndex === index}"
          @click="itemClick(index)">
      <span>{{item}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    // 可以通过 emits 选项来定义组件可触发的事件
    emits: ["titleClick"],
    props: {
      title: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        currentIndex: 0,
      }
    },
    methods: {
      itemClick(index) {
        this.currentIndex = index;
        this.$emit("titleClick", index)
      },
    },
  }
</script>

<style scoped>
  .tab-control {
    display: flex;
  }

  .tab-control-item{
    flex: 1;
    text-align: center;
  }
  .tab-control-item.active {
    color: red;
  }
  .tab-control-item.active span {
    border-bottom: 3px solid red;
  }
</style>

以上代码均在vue-cli创建的项目中完成，主要看思路。