什么是vue組件？
組件（Component）是vue.js最強(qiáng)大的功能之一，組件可以擴(kuò)展HTML元素，封裝可重用的代碼。
組件的注冊(cè)使用如下，其中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">點(diǎn)擊了{(lán){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='來(lái)自父組件的值，通過(guò)屬性的方式傳遞'></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: '父組件中內(nèi)容',
            ptitle: '動(dòng)態(tài)綁定屬性'
        }
    });
    </script>

子組件給父組件傳值：
props傳遞數(shù)據(jù)原則：?jiǎn)蜗驍?shù)據(jù)流,所以子組件向父組件傳值的本質(zhì)是自定義事件

<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")'>擴(kuò)大父組件中字體的大小</button>
        </div>
        `
    });
    var vm = new Vue({
        el:'#app',
        data:{
            pmsg:'父組件中內(nèi)容',
            parr: ['蘋果','桔子','香蕉'],
            fontSize: 10
        },
        methods:{
            handle: function(){
                //擴(kuò)大字體大小
                this.fontSize += 5;
            }
        }
    });
    </script>