Vue的組件的概念與基本使用

什麼是vue的組件（what）?

---

  組件(Component)是vue.js中很強大的一個功能，能夠將一些可重用的代碼進行封重用。全部的 Vue 組件同時也是 Vue 的實例，能夠接受使用相同的選項對象和提供相同的生命週期鉤子。
一句話歸納：組件就是能夠擴展HTML元素，封裝可重用的HTML代碼，能夠將組件看做自定義的HTML元素。

如何使用組件（how）?

---

• 前提條件: 使用組件名的時候是須要先實例化Vue的，由於組件如今是擴展在Vue中，想使用Vue中的組件就須要先實例化得到這個組件纔可以使用

1. 建立組件

建立組件即在Vue構造函數中經過extend()方法添加該組件（ps：能夠理解成在剛開學的時候，老師不認識你，可是知道有泡泡這我的）

2. 註冊組件

註冊組件即在Vue構造函數中經過一個屬性名與之關聯在一塊兒，有點像var name='paopao';這個時候 temp就是泡泡了（ps：這個時候老師把花名冊上的'泡泡'和人對應起來了） 組件的註冊可分爲全局註冊與局部註冊，區別：註冊的地方不一致；全局註冊就是隻要是實例化Vue的範圍均可以使用該組件，局部註冊就是隻能在某一個Vue實例的範圍內使用該組件

• 全局註冊（使用 Vue.component(tagName, options)）

//使用組件
  < div id="app">
     < my-component>< /my-component>
  < /div>
//確保在初始化根實例以前註冊組件
Vue.component('my-component', {
  template: '< div> component test! < /div>'
})
// 建立根實例
new Vue({
  el: '#app',
  components: { App },
  template: ''
})
複製代碼

最終渲染爲：

< div id="app">
  < div>component test!< /div>
< /div>
複製代碼

• 局部註冊

每一個組件都註冊到全局的方式顯然很不合理，更多的時候採用的每每是局部註冊的方式。能夠經過某個 Vue 實例/組件的實例選項 components 註冊僅在其做用域中可用的組件

var Child = {
  template: '< div>一個局部註冊的組件!< /div>'
}
new Vue({
  components: {
  // < localRegistration>  只在父組件模板中才可用
    'localRegistration': Child
  }
})
複製代碼

3. 使用組件

這個時候就能夠在dom中添加所建立的組件名（這個時候你終於能夠以'泡泡'的名義去作點什麼事了，好比上課，去圖書館等）

Dom模版解析事項

---

   當使用 DOM 做爲模板時 (例如，使用 el 選項來把 Vue 實例掛載到一個已有內容的元素上)，會受到 HTML 自己的一些限制，由於 Vue 只有在瀏覽器解析、規範化模板以後才能獲取其內容。要特別注意的是，像 < ul>、< ol>、< table>、< select> 這樣的元素裏容許包含的元素有限制，而另外一些像 < option> 這樣的元素只能出如今某些特定元素的內部。

例如(< my-row>爲自定義的組件)：

< table>
  < my-row>< /my-row>
< /table>
複製代碼

此時的自定義組件 < my-row> 被看成無效的內容，由於 Vue 只有在瀏覽器解析、規範化模板以後才能獲取其內容。而此時的table標籤尚未被解析，因此在往裏面放入自定義組件的時候會致使錯誤的渲染結果。此時的解決方法是可使用特殊的 is 特性：

< table>
  < tr is="my-row">
< /table>
複製代碼

!!! 若是使用來自如下來源之一的字符串模板，則沒有此限制:

• < script type="text/x-template">
• JavaScript 內聯模板字符串 (經過內聯的方式使其一同進行加載)
• .vue 組件

例如：

new Vue({
   el: '#app',
   components:{
     'selectcomp':{
       template: ' < select> < optioncomp>< /optioncomp>< /select>'
      }
    }
  })
複製代碼

Vue 實例時傳入的選項中data 必須是函數

---

若是這樣的寫法：

data: {
   msg: 'Welcome to Your Vue.js App'
 }
複製代碼

將會報錯：

//Vue 會中止運行，並在控制檯發出警告，告訴你在組件實例中 data 必須是一個函數。
 [HMR] Waiting for update signal from WDS...
vue.esm.js?efeb:591 [Vue warn]: The "data" option should be a function that 
returns a per-instance value in component definitions.
複製代碼

舉個例子來對比一下：

< div id="example">
  < simple-counter>< /simple-counter>
  < simple-counter>< /simple-counter>
  < simple-counter>< /simple-counter>

複製代碼

var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '< button v-on:click="counter += 1">{{ counter }}< /button>',
  // data 的確是一個函數了，所以 Vue 不會警告，
  // 可是咱們卻給每一個組件實例返回了同一個對象的引用(此處是爲了作對比)
  data: function () {
    return data
  }
})

new Vue({
  el: '#example'
})
複製代碼

如今的結果是有三個能夠計數的按鈕，可是不論點擊的是哪個，全部的按鈕的所記數都會加1，由於每一個組件實例返回的是同一個對象的引用，不論哪一個按鈕的對數據進行操做，都會影響到其餘的按鈕組件計數結果

//將其data的格式寫成以下，此時每一個 counter 都有本身內部的狀態了，都是獨立存在的，
每一個組件返回的都是全新的數據對象：
data: function () {
  return {
    counter: 0
  }
}
複製代碼

---

                                                                                    下一篇：組件間的數據傳遞