學習筆記：Vue——組件和Prop

前言：這一篇是關於組件基礎、組件註冊、Prop等內容。

---

 

1.組件基礎

01.組件是可複用的Vue實例

 

02.組件中的data選項必須是一個函數

 

03.一個組件默承認以有任意數量的prop

任何值均可以傳遞給任何prop。就像訪問data同樣。

 

04.使用$emit監聽子組件事件

一個全局的子組件代碼：

Vue.component('blog-post', {
    props: ['post'],
    template: `
        <div class="blog-post">
            <h3>{{ post.title }}</h3>
            <button v-on:click="$emit('enlarge-text', 0.1)">放大文字</button>
            <div v-html="post.content"></div>
        </div>
    `
})

父組件代碼：

<blog-post v-bind:post="post" :style="{fontSize: postFontSize + 'em'}" v-on:enlarge-text="onEnlargeText"></blog-post>

var vm = new Vue({
    el: '#app',
    data: {
        post: {
            id: 1,
            title: '給一個青年詩人的十封信',
            content: '<p>Vue從入門到實戰</p>'
        },
        postFontSize: 1
    },
    methods: {
        onEnlargeText: function (enlargeAmount) {
            this.postFontSize += enlargeAmount
        }
    }
})

 

05.使用事件拋出一個值

子組件的一個事件能夠經過$emit的第二個參數來提供一個值，在父級組件監聽這個事件時，經過$event訪問被拋出的這個值。

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

 

06.在組件上使用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>

 

07.動態組件

Vue有一個<component>元素，它有一個is屬性

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

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

• 已註冊組件的名字，或
• 一個組件的選項對象

 

08.特殊的is屬性的妙用

有些html元素，諸如<ul>、<ol>、<table>、<select>，對於哪些元素能夠出如今其內部是有嚴格限制的。

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

這個自定義組件<blog-post-row>會被做爲無效的內容提高到外部，使用is特性可解決：

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

 

 

2.Prop

01.Prop類型

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

 

02.傳入一個對象的全部屬性

若是你想要將一個對象的全部屬性都做爲prop傳入，你能夠使用不帶參數的v-bind取代b-bind:prop-name，例如：

post: {
  id: 1,
  title: 'My Journey with Vue'
}

下面的模板：

<blog-post v-bind="post"></blog-post>

等價於：

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

 

03.單向數據流

全部的prop都使得其父子prop之間造成了一個單向下行綁定

每次父級組件發生更新時，子組件中全部的prop都將會刷新爲最新的值。這意味着你不該該在一個子組件內部改變prop。

 

04.Prop驗證

這在開發一個會被別人用到的組件時尤爲有幫助。

Vue.component('my-component', {
    props: {
        //基礎的類型檢查
        propA: Number,

        //多個可能的類型
        propB: [String, Number],

        //必填的字符串
        propC: {
            type: String,
            required: true
        },

        //帶有默認值的數字
        propD: {
            type: Number,
            default: 100
        },

        //帶有默認值的對象
        propE: {
            type: Object,
            //對象或數組默認值必須從一個工廠函數獲取
            default: function () {
                return {
                    message: 'hello'
                }
            }
        },

        //自定義驗證函數
        propF: {
            validator: function (value) {
                return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
    }
})

注意：那些prop會在一個組件實例建立以前進行驗證，因此實例的屬性（如data、computed等）在default或validator函數中不可用。

 

05.類型檢查

type能夠時下列原生構造函數中的一個：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

type還能夠是一個自定義的構造函數，而且經過instanceof來進行檢查確認。例如，給定下列現成的構造函數：

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

你能夠使用：

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

來驗證author prop的值是不是經過new Person建立的

 

06.非Prop的特性

（1）組件能夠接受任意的特性，而這些特性會被添加到這個組件的根元素上

（2）替換/合併已有的特性

對絕大多數特性來講，從外部提供給組件的值會替換掉組件內部設置好的值。因此若是傳入 type="text" 就會替換掉 type="date" 並把它破壞。 class 和 style會合並兩邊的值。

（3）禁用特性繼承

若是你不但願組件的根元素繼承特性，你能夠在組件的選項中設置 inheritAttrs: false

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

一個基礎組件的例子：

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

注意：inheritAttrs: false不會影響style和class的綁定

這個模式容許你在使用基礎組件的時候更像是使用原始的HTML元素，而不會擔憂哪一個元素是真正的根元素

<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>

 

 

筆記摘自Vue官方文檔：

• 組件基礎
• Prop