<ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素， <option> 只能出现在其它元素内部。
在自定义组件中使用这些受限制的元素时会导致一些问题，例如：
<table>
<my-row></my-row>
</table>
自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性：
<table>
<tr is="my-row"></tr>第三
</table>
2 组件中的data必须是函数
components:{
'my-component': {
template:'<tr>{{aa}}</tr>',
data:function(){
return {aa:'aaaaaaaaaaaaaaaaa'}
}
}
}
3
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: '蔬菜' },
{ text: '奶酪' },
{ text: '随便其他什么人吃的东西' }
]
},
})
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
props这个有点像data 是渲染的时候传值
v-bind:todo="item" 传item给todo