全局组件

使用 Vue.component(tagName,options) 可以注册一个全局组件。组件是全局的，即在Vue的任何实例下都可以使用该组件

Vue.component('TodoItem',{
      props: ['content'],
      template: '<li>{{content}}</li>'
    })

局部组件

局部组件用选项对象 components 属性实现注册，只能在当前实例中使用该组件

var TodoItem = {
      props: ['content'],
      template: '<li>{{content}}</li>'
    }
    var app = new Vue({
      el: '#app',
      components:{TodoItem},
      data: {
        list: [],
        inputValue:''
      },
      methods: {
        btn: function(){
          this.list.push(this.inputValue)
          this.inputValue = ''
        } 
      }
    })

Ps:实例带码

<div id='app'>
    <input type="text" v-model='inputValue'>
    <button @click='btn'>提交</button>
    <ul>
      <todo-item v-bind:content='item'                        //这里采用父组件向子组件传值
                 v-for='item in list'>                
      </todo-item>
    </ul>
  </div>

父子组件间传值

<div id="root">     //父 => 子    绑定属性count
    <counter ref='one' :count='3' @change='handleIncrease'></counter>
    <counter ref='two' :count='2' @change='handleIncrease'></counter>
    <div>{{total}}</div>
  </div>
  <script>
    var counter = {
      props: ['count'],        
      template: '<div @click="handleClick">{{number}}</div>',
      data: function () {
        return {
          number: this.count
        }
      },
      methods: {
        handleClick: function () {
          this.number++
          this.$emit('change', 1)    // 子 =>父     绑定事件change
        }
      }
    }
    var vm = new Vue({
      el: '#root',
      data: {
        total: 5
      },
      components: {
        counter
      },
      methods: {
        handleIncrease: function (step) {
          // this.total += step
          this.total = this.$refs.one.number + this.$refs.two.number
        }
      }
    })
  </script>

组件参数校验

<div id="root">
    <child :content='123'></child>
  </div>
  <script>
    Vue.component('child', {
      props: {
        content: {
          type: String,
          // required: false,    是否要求必须传递值
          // default: 'ASDCXD',  如果没有传值，则默认值为ASDCXD
          validator: function() {
            return value.length > 5      //对所传的值进行长度校验
          }
        }
      },
      template: '<div>{{content}}</div>'
    })

    var vm = new Vue({
      el: '#root',
    })
  </script>

组件使用的一些细节

每个row为一个组件，但tbody内只能是tr,所以使用is，（ul ,select一样，如果内部子项为一个单独组件，为了防止bug，使用is）
<div id="root">
    <table>
      <tbody>
        <tr is='row'></tr>
        <tr is='row'></tr>
        <tr is='row'></tr>
      </tbody>
    </table>
  </div>
  <script>
    Vue.component('row', {
      template: '<tr><td>this is row</td></tr>'
    })
    var vm = new Vue({
      el: '#root'
    })
  </script>

给组件绑定原生事件

<div id="root">
    <child @click.native='handleclick'></child>
</div>