Vue的元件屬性：components

使用場景

一般在專案的使用過程中，某個需要多次使用的模組，會將整個模組抽取出來，寫一個元件，供給其他頁面進行呼叫或者是在一個頁面中，多次使用到一個重複的程式碼樣式，將其抽取出來，用元件來代替，以實現程式碼的複用性。

元件又分為區域性註冊元件和全域性註冊元件

全域性註冊元件：指的是在任何一個頁面都可以進行使用的元件，例如：頭部、底部
區域性註冊元件：本頁面進行復用的程式碼樣式 ，例如：頁面中的活動模組

全域性註冊元件使用方法：

<script type="text/javascript">
            //自定義元件，counter是元件的名稱
            var counter = {
                 template: "<button @click='num++'>你已經點選了{{num}}次</button>",
            //在元件中，data必須是返回值的函式，而不是屬性，所以要用data()，且用return返回資料
                 data(){
                      return {num:0}
                 }
            }
            //全域性註冊元件,第一個是引數名字，第二個是元件名字
           //“”內的counter是元件的名字，也可以用其他名字，第二個counter是指代上面的元件
            Vue.component("counter",counter);
</script>
 

區域性註冊元件使用方法：

<script type="text/javascript">
            //自定義元件
            var counter = {
                 template: "<button @click='num++'>你已經點選了{{num}}次</button>",
                 data(){
                      return {num:0}
                 }
            }

            var vm=new Vue({
                 el:"#app",
                 //區域性註冊元件,第一個counter是元件的名字，第二個counter是上面元件的名字
                 components:{
                      counter: counter
                 }
            });
      </script>
 

效果為：每點選一次按鈕，則num+1，意味著按鈕裡面的文字發生改變，也就變成了
你已經點選了0次
你已經點選了1次
你已經點選了2次
......

結束啦~