什么是vue組件？
組件（Component）是vue.js最強大的功能之一，組件可以擴展HTML元素弓千，封裝可重用的代碼。
組件的注冊使用如下献起，其中button-counter是組件名稱洋访，以HTML形式使用

<div id="app">
    <!-- 組件的使用 -->
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    Vue.component('button-counter', {
      data: function(){
        return {
          count: 0
        }
      },
      template: '<button @click="handle">點擊了{{count}}次</button>',
      methods: {
        handle: function(){
          this.count += 2;
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>

父組件給子組件傳值：
父組件發(fā)送的形式是以屬性的形式綁定值到子組件身上；
然后子組件用屬性props接收谴餐；
在props中使用駝峰形式姻政，模板中需要使用短橫線的形式。

<div id="app">
    <div>{{pmsg}}</div>
    <menu-item title='來自父組件的值岂嗓，通過屬性的方式傳遞'></menu-item>
    <menu-item :title='ptitle'></menu-item>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
    /*
        父組件向子組件傳值
    */
    Vue.component('menu-item',{
        props: ['title'],
        data: function(){
            return {
                msg: '子組件本身的數(shù)據(jù)'
            }
        },
        template:'<div>{{msg + "-------" + title}}</div>'
    })
    var vm = new Vue({
        el:'#app',
        data: {
            pmsg: '父組件中內容',
            ptitle: '動態(tài)綁定屬性'
        }
    });
    </script>

子組件給父組件傳值：
props傳遞數(shù)據(jù)原則：單向數(shù)據(jù)流,所以子組件向父組件傳值的本質是自定義事件

<div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
    <menu-item :parr='parr' @enlarge-text='handle'></menu-item>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
    Vue.component('menu-item',{
        props:['parr'],
        template:`
        <div>
        <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
        </ul>
            <button @click='$emit("enlarge-text")'>擴大父組件中字體的大小</button>
        </div>
        `
    });
    var vm = new Vue({
        el:'#app',
        data:{
            pmsg:'父組件中內容',
            parr: ['蘋果','桔子','香蕉'],
            fontSize: 10
        },
        methods:{
            handle: function(){
                //擴大字體大小
                this.fontSize += 5;
            }
        }
    });
    </script>