父元素选中，子元素高亮，处理频道激活高亮

### 让激活频道高亮

问题描述：

在频道选中时，频道列表的频道高亮，从

到

思路：

• 将首页中的激活的标签索引传递给频道编辑组件
• 在频道编辑组件中遍历我的频道列表的时候判断遍历项的索引是否等于激活的频道标签索引，如果一样则作用一个高亮的 CSS 类名

过程：

主页面：

<van-tabs class="channel-tabs" v-model="active" animated swipeable /> 

v-model所绑定的active就是绑定当前标签所对应的索引值，

      <channel-edit
      :my-channels="channels"
      :active="active"
      />
      //父元素传送active值

  props: {
    active: {
      type: Number,
      required: true
    }
  }
  子元素接收

为了给文本单独设置样式，在循环中设置插槽，在span里显示循环id

<van-grid class="my-grid" :gutter="10">
            <van-grid-item
            class="grid-item"
            v-for="(channel,index) in myChannels"
            :key="index"
            icon="clear"/>
            <!--
                v-bind:class 语法
                一个对象，对象中的key表示要作用的css类名
                    对象中的value要计算出布尔值
                        true，则作用该类名
                        false，则不作用
              -->
            <span
            class="text"
            :class="{active:index === active}"
            slot=text
            >
                {{ channel.name }}
            </span>
            </van-grid>

设置active样式

.active{
    color:red
}