Vue子组件循环和接收父组件值的问题

Question

阅读Vue官网教程，在动态组件这一个节，看到一个示例，想自己实现一下如下图:

然后就动手弄了一下tab部分:

<script src="//unpkg.com/vue">
</script>
<div id="dynamic-component-demo" class="demo">
  <!-- <button class="dynamic-component-demo-tab-button">
  Home
  </button>
  <button class="dynamic-component-demo-tab-button">
  Posts
  </button>
  <button class="dynamic-component-demo-tab-button dynamic-component-demo-tab-button-active">
  Archive
  </button> -->
  <tab-buttons  :tabs="tabs" v-for="(tab,index) in tabs" :key="index">
  </tab-buttons>
  <div class="dynamic-component-demo-tab">
    Archive component
  </div>
</div>

var tabButtons = {
  template: `<button class="dynamic-component-demo-tab-button"></button>`,
     props:{
        tabs:{
            type:Array
        }
     }   
};


new Vue({
  el:"#dynamic-component-demo",
  data:{
    tabs:['Home','Posts','Archive']
  },
  components:{
    "tab-buttons":tabButtons
  }
})

#demo,
.demo,
.content .demo {
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 25px 35px;
  margin-top: 1em;
  margin-bottom: 40px;
  font-size: 1.2em;
  line-height: 1.5em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-x: auto;
}

#demo >:first-child,
.demo >:first-child,
.content .demo >:first-child {
  margin-top: 0;
}

.dynamic-component-demo-tab-button:hover {
  background: #e0e0e0;
}

.dynamic-component-demo-tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}

.dynamic-component-demo-tab-button-active {
  background: #e0e0e0;
}

在线调试地址: https://jsrun.net/zQhKp

遇到的问题是不知道怎么放值到每个单独的子组件的模板里， 循环和传值都放在了tab-buttons。似乎，每一个tab-buttons都接收到了完整的数组值。

Answer 1

:tabs="tabs"

改为

:tabs="tab"