频道列表模块 (二) 01-渲染我的频道-模拟数据转换成真实数据-props接收对象时，如果是复杂数据类型使用函数的返回值

渲染我的频道-模拟数据转换成真实数据-props接收对象时，如果是复杂数据类型使用函数的返回值

• 使用父组件数据 src/views/home/index.vue
  • 我的频道列表
  • 当前激活频道

<channel-edit :channels="channels" :activeIndex="activeIndex"></channel-edit>

data () {
  return {
     activeIndex: 0,
     channels: []
  }
}  

• 接收父组件数据 src/views/home/components/channel-edit.vue

  props: {
      //我的频道
    channels: {
      type: Array,
       //规范： props接收对象时，如果是复杂数据类型使用函数的返回值
      default: () => []
    },
        //激活频道的索引 
    activeIndex: {
      type: Number,
      default: 0
    }
  },

渲染： src/views/home/components/channel-edit.vue

<div class="channel">
  <div class="tit">
    我的频道：
    <span class="tip">点击可进入频道</span>
    <van-button v-if="!editing" @click="editing=true" size="mini" type="info" plain>				编辑
    </van-button>
    <van-button v-else size="mini" type="danger" @click="editing=false" plain>
      完成
    </van-button>
  </div>
  <van-grid class="van-hairline--left">
    <van-grid-item v-for="(item, i) in channels" :key="item.id">
      <span class="f12" :class="{red:activeIndex===i}">							
        {{item.name}}
      </span>
      <van-icon v-show="editing" v-if="i!==0" class="btn" name="cross"></van-icon>
      </van-icon>
    </van-grid-item>
  </van-grid>
</div>