<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: {

<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>

props這個有點像data 是渲染的時候傳值

v-bind:todo="item" 傳item給todo

學習vue5_組件