vue 組件基礎

本篇主要是摘抄的vue的官方文檔，寫此文章的目的是加深對他們的理解。

1.組件的一個基本實例 // 定義一個名爲 button-counter 的新組件

// 定義一個名爲 button-counter 的新組件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
複製代碼

2.組件的複用 咱們能夠將上面自定義的組件進行任意次數的複用

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
複製代碼

注意當點擊按鈕的時候，每一個組件都會各自獨立維護它的count.由於你每用一次組件，就會有一個它的新的實例被建立。

data必須是一個函數，由於每一個實例能夠維護一份被返回對象的獨立的拷貝。

3.組件的組織 一般一個應用會以一棵嵌套的組件樹的形式組成。 組件的註冊方式的類型：全局註冊和局部註冊。 全局註冊：

Vue.component('my-component-name', {
  // ... options ...
})
複製代碼

全局註冊的組件能夠用在其被註冊以後的任何 (經過 new Vue) 新建立的 Vue 根實例，也包括其組件樹中的全部子組件的模板中

4.經過Prop向子組件傳遞數據是單向的，全部的prop都使得其父子prop之間造成了一個單向下行綁定：父級prop的更新會向下流動到子組件中，可是反過來是不行的。這樣會防止從子組件意外改變父級組件的狀態。此外，每次父組件發生更新的時候，子組件中全部的prop都會刷新爲最新值。

5.監聽子組件事件 子組件經過調用內建的$emit方法並傳入事件名稱來觸發一個事件，如今使用一個案例，開發組件時,它的一些功能要求和父級組件進行溝通。例如咱們可能會引入一個可訪問性的功能來放大博文的字號，同時讓頁面的其它部分保持默認的字號。

在其父組件中，咱們能夠經過添加一個 postFontSize 數據屬性來支持這個功能：

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})
複製代碼

它能夠在模板中用來控制全部博文的字號：

<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</div>
複製代碼

如今咱們在每篇博文正文以前添加一個按鈕來放大字號：

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button>
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})
複製代碼

問題是這個按鈕不會作任何事：

<button>
  Enlarge text
</button>
複製代碼

當點擊這個按鈕時，咱們須要告訴父級組件放大全部博文的文本。幸虧 Vue 實例提供了一個自定義事件的系統來解決這個問題。父級組件能夠像處理 native DOM 事件同樣經過 v-on 監聽子組件實例的任意事件：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>
複製代碼

同時子組件能夠經過調用內建的 $emit 方法 並傳入事件名稱來觸發一個事件：

<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>
複製代碼

有了這個 v-on:enlarge-text="postFontSize += 0.1" 監聽器，父級組件就會接收該事件並更新 postFontSize 的值。

6.使用事件拋出一個值 有的時候用一個事件來拋出一個特定的值是很是有用的。例如咱們可能想讓 組件決定它的文本要放大多少。這時可使用 $emit 的第二個參數來提供這個值：

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>
複製代碼

而後當在父級組件監聽這個事件的時候，咱們能夠經過 $event 訪問到被拋出的這個值：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>
複製代碼

或者，若是這個事件處理函數是一個方法：

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>
複製代碼

那麼這個值將會做爲第一個參數傳入這個方法：

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}
複製代碼

7.在組件上使用v-model

v-model 實際上是個語法糖 自定義事件也能夠用於建立支持 v-model 的自定義輸入組件。記住：

<input v-model="searchText">
複製代碼

等價於：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
複製代碼

當用在組件上時，v-model 則會這樣：

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>
複製代碼

爲了讓它正常工做，這個組件內的

<input>
複製代碼

必須：

將其 value 特性綁定到一個名叫 value 的 prop 上 在其 input 事件被觸發時，將新的值經過自定義的 input 事件拋出 寫成代碼以後是這樣的：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})
複製代碼

如今 v-model 就應該能夠在這個組件上完美地工做起來了：

<custom-input v-model="searchText"></custom-input>
複製代碼

到目前爲止，關於組件自定義事件你須要瞭解的大概就這些了，若是你閱讀完本頁內容並掌握了它的內容，咱們會推薦你再回來把自定義事件讀完。

8.動態組件 不一樣組件之間的動態切換，這須要

<component>
複製代碼

元素的is特性來實現：

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

複製代碼

在上述示例中，currentTabComponent 能夠包括

• 已註冊組件的名字，或

• 一個組件的選項對象