自定義組件

什麼是組件

組件（component）就是零件，將零件組裝成想要的工具（頁面）。

組件是Vue.js最強大的功能之一，它能夠擴展HTML元素，封裝可重用的代碼，經過傳入對象的不一樣，實現組件的複用。

使用組件的好處

• 組件是能夠複用性的
• 易於維護
• 有封裝性，易於使用
• 大型項目中下降組件之間重複性

全局組件

全局組件：在任何地方，任何方式，任何地點均可以使用的標籤組件。

Vue.component("vue-hesder", {
    	// h1標籤是咱們在自定義主鍵裏面寫的參數的標籤
    	template: '<h1>標題</h1>'
    })
    new Vue({
    	el: '#main'
    });
    new Vue({
    	el: '#main2'
    });
    new Vue({
    	el: '#main3'
    });

局部組件

局部組件：只是在咱們規定的範圍以內纔會生效。

new Vue({
    	el: '#main',
    	components: {
    		"vue-hesder": {
    		template: '<h1>標題{{vue}}</h1>'
    		}
    	}
    })

全局組件和局部組件的區別

• 使用範圍 全局：能夠再頁面中任何位置使用。 局部：只能在定義它的el中使用，不能在其餘位置，不然就會失效。
• 定義方法 全局：能夠使用Vue.component（tagName，options）定義。 局部：能夠經過Vue實例中component屬性定義局部組件。
• 是否掛載 全局組件在擴展元素用於封裝複用代碼時不須要掛載，可是不常見，由於會影響瀏覽器的性能 局部組件必須手動掛載，不然會失效。
• 其餘 局部組件中代碼的編寫是」components「,而全局組件中是」component「 。

組件數據交互的特色

// 全局定義
        // var data = {
        //   vue: 0
        // }
        new Vue({
          el: '#main',
          data: {
            vue: "Welcome Xkd!"
          },
          components: {
            "vue-hesder": {
              template: '<h1 @click="add">標題{{vue}}</h1>',
              data: function() {
                // return data;
                // 局部定義，只對當前值進行應用，不會對其餘組件有影響和重複性
                return {
                  vue: 0
                }
              },
              methods: {
                add: function() {
                  this.vue++;
                }
              }
            }
          }
        });