为什么在子类当中循环之后不能传递给他的父类

[laomokuyite]

在这段代码当中为什么在将my-nav当中的ul li的值传递给他的父组件my-header的时候会报错
<div id="app">
<my-header :list = "list"></my-header>
</div>


<script type="text/javascript" src="js/vue.js"></script>
<script>
var vue = new Vue({
el : "#app",
data: {
list:['第一项111','第二项222','第三项']
} ,
components: {
"my-header": {
template: "<div>" +
"<ul>" +
"<li v-for='item in list'>{{item}}</li>" +
"</ul>" +
"<my-nav :list='list'></my-nav>"+
"</div>",
props: ['list']
},
components: {
"my-nav":{
template:
"<ul>" +
"<li v-for='item in list'>{{item}}</li>" +
"</ul>",
props:["list"]
}
}

}
})
</script>

[dislido]

my-nav外面为什么要再包一个components