vue — 組件基礎

什麼是組件

組件（Component）是對數據和方法的簡單封裝。web中的組件其實能夠當作是頁面的一個組成部分，它是一個具備獨立的邏輯和功能的界面，同時又能根據規定的接口規則進行相互融和，最終成爲一個完整的應用，
頁面就是由一個個相似這樣的組成部分組成的，好比導航、列表、彈窗、下拉菜單等。頁面只不過是這樣組件的容器，組件自由組合造成功能完整的界面，當不須要某個組件，或者想要替換某個組件時，能夠隨時進行替換和刪除，而不影響整個應用的運行。、前端組件化的核心思想就是將一個巨大複雜的東西拆分紅粒度合理的小東西。

使用提升開發效率、方便重複使用、簡化調試步驟、提高整個項目的可維護性、便於協同開發。

vue做爲一個輕量級前端框架，其核心就是組件化開發。
組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠表現爲用 is 特性進行了擴展的原生 HTML 元素。

vue中，組件是可複用的 Vue 實例。由於組件是可複用的 Vue 實例，因此它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。僅有的例外是像 el 這樣根實例特有的選項。

組件註冊

全局註冊

經過 Vue.component 來建立組件：

Vue.component('my-component-name', {
  // ... 選項 ...
    })

這些組件是全局註冊的。也就是說它們在註冊以後能夠用在任何新建立的 Vue 根實例 (new Vue) 的模板中。好比：

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })


<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

在全部子組件中也是如此，也就是說這三個組件在各自內部也均可以相互使用。

局部註冊

全局註冊每每是不夠理想的。好比，若是你使用一個像 webpack 這樣的構建系統，全局註冊全部的組件意味着即使你已經再也不使用一個組件了，它仍然會被包含在你最終的構建結果中。這形成了用戶下載的 JavaScript 的無謂的增長。

在這些狀況下，你能夠經過一個普通的 JavaScript 對象來定義組件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

而後在 components 選項中定義你想要使用的組件：

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

對於 components 對象中的每一個屬性來講，其屬性名就是自定義元素的名字，其屬性值就是這個組件的選項對象。
注意局部註冊的組件在其子組件中不可用。例如，若是你但願 ComponentA 在 ComponentB 中可用，則你須要這樣寫：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

使用Babel和webpack中的註冊組件

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

注意在 ES2015+ 中，在對象中放一個相似 ComponentA 的變量名實際上是 ComponentA: ComponentA 的縮寫，即這個變量名同時是：

用在模板中的自定義元素的名稱
包含了這個組件選項的變量名

基礎組件的自動化全局註冊

沒看懂。

data 必須是一個函數

data: {
  count: 0
}

這樣定義的data中的變量是全局變量，在使用組件時，在一個組件中修改變量的值，會影響到全部組件中該變量的值。爲避免變量干擾，一個組件的 data 選項必須是一個函數，所以每一個實例能夠維護一份被返回對象的獨立的拷貝：

data: function () {
  return {
    count: 0
  }
}

動態組件

在不一樣組件之間進行動態切換是很是有用的，好比在一個多標籤的界面裏：

上述內容能夠經過 Vue 的 <component> 元素加一個特殊的 is 特性來實現：

<!-- 組件會在 `currentTabComponent` 改變時改變 -->
<component v-bind:is="currentTabComponent"></component>

你會注意到，若是你選擇了一篇文章，切換到 Archive 標籤，而後再切換回 Posts，是不會繼續展現你以前選擇的文章的。這是由於你每次切換新標籤的時候，Vue 都建立了一個新的 currentTabComponent 實例。

從新建立動態組件的行爲一般是很是有用的，可是在這個案例中，咱們更但願那些標籤的組件實例可以被在它們第一次被建立的時候緩存下來。爲了解決這個問題，咱們能夠用一個 <keep-alive> 元素將其動態組件包裹起來。

<!-- 失活的組件將會被緩存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

能夠在這裏查看動態組件例子。動態組件實例

dom標籤內使用組件

有些 HTML 元素，諸如 <ul>、<ol>、<table> 和 <select>，對於哪些元素能夠出如今其內部是有嚴格限制的。而有些元素，諸如 <li>、<tr> 和 <option>，只能出如今其它某些特定的元素內部。

這會致使咱們使用這些有約束條件的元素時遇到一些問題。例如：

<table>
  <blog-post-row></blog-post-row>
</table>

這個自定義組件 <blog-post-row> 會被做爲無效的內容提高到外部，並致使最終渲染結果出錯。幸虧這個特殊的 is 特性給了咱們一個變通的辦法：

<table>
  <tr is="blog-post-row"></tr>
</table>