全局組件

使用 Vue.component(tagName,options) 可以注冊一個(gè)全局組件。組件是全局的，即在Vue的任何實(shí)例下都可以使用該組件

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

局部組件

局部組件用選項(xiàng)對象 components 屬性實(shí)現(xiàn)注冊，只能在當(dāng)前實(shí)例中使用該組件

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:實(shí)例帶碼

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

組件參數(shù)校驗(yàn)

<div id="root">
    <child :content='123'></child>
  </div>
  <script>
    Vue.component('child', {
      props: {
        content: {
          type: String,
          // required: false,    是否要求必須傳遞值
          // default: 'ASDCXD',  如果沒有傳值，則默認(rèn)值為ASDCXD
          validator: function() {
            return value.length > 5      //對所傳的值進(jìn)行長度校驗(yàn)
          }
        }
      },
      template: '<div>{{content}}</div>'
    })

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

組件使用的一些細(xì)節(jié)

每個(gè)row為一個(gè)組件，但tbody內(nèi)只能是tr,所以使用is，（ul ,select一樣，如果內(nèi)部子項(xiàng)為一個(gè)單獨(dú)組件，為了防止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>