<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