前言：

没有比人更高的山，没有比脚更长的路

--------------------------------正文---------------------------------

注册组件

全局

   Vue.component('my-com',{
      template: '',
      data(){return{xxx:xxx}}
   });

局部

  new Vue({
    el:'',
    data:{},
    components: {
       xxx: {
          template:'',
          data(){return {xxx:xxx}}
       }
    }
  })

组件之间数据传递

一、父组件给子组件数据（props）

  eg:
    <div id="box">
      <my-head v-for="(item,index) in atitle" :key="index" :title="item"></my-head> 
    </div>
    <script src="js/vue.js"></script>
    <script type="x-template" id="my-head">
      <div>
        <h2>{{title}}</h2>
        <p v-for="(item,index) in num" :key="index">{{item}}</p>
      </div>
    </script>
    <script type="text/javascript">
      new Vue({
        el:'#box',
        data:{
          atitle:['标题一','标题二','标题三']
        },
        components: {
          'myHead':{
            props: {
              title:String
            },
            template:'#my-head',
            data(){
              return{
                num:[1,2,3]
              }            
            }
          }       
        }
      });
    </script>

二、子组件给父组件数据

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

  eg:
    <div id="box">
      {{count}}
      <my-head v-on:emitnum="onnum"></my-head>
    </div>
    <script type="x-template" id="my-head">
      <div>
        <input type="number" v-model="num" @change="changeNum">
      </div>
    </script>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el:'#box',
        data:{
          count:0
        },
        methods:{
          onnum(num){
            this.count=num;
          }
        },
        components:{
          'myHead':{
           template:'#my-head',
           data(){
              return{
                num:0
              }
            },
           methods:{
             changeNum(){
                this.$emit('emitnum',this.num)
             }
           }
         }
       }
     });
   </script>

三、同级组件传递数据

  eg:
    <div id="box1">
      {{count}}
      <button>按钮</button>
    </div>
    <div id="box2">
      {{count}}
      <button @click="change">按钮</button>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
      var oV=new Vue();
      new Vue({
        el:'#box1',
        data:{
          count:1
        },
        created(){
          var _this=this;
          oV.$on('count',function(num){
            _this.count=num;
          })
        }
      });
      new Vue({
        el:'#box2',
        data:{
          count:5
        },
        methods:{
          change(){
            oV.$emit('count',this.count);
          }
        }
      });
    </script>