本篇文章給大家分享的是有關如何在Vue組件中使用prop屬性，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,子長企業(yè)網(wǎng)站建設,子長品牌網(wǎng)站建設,網(wǎng)站定制,子長網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,子長網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

靜態(tài)的和動態(tài)的 Prop

像這樣，你已經(jīng)知道了可以像這樣給 prop 傳入一個靜態(tài)的值：

<blog-post title="My journey with Vue"></blog-post>

你也知道 prop 可以通過 v-bind 動態(tài)賦值，例如：

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

在上述兩個示例中，我們傳入的值都是字符串類型的，但實際上任何類型的值都可以傳給一個 prop。

傳入一個數(shù)字

<!-- 即便 `42` 是靜態(tài)的，我們仍然需要 `v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
<blog-post v-bind:likes="42"></blog-post>
<!-- 用一個變量進行動態(tài)賦值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

傳入一個布爾值

<!-- 包含該 prop 沒有值的情況在內，都意味著 `true`。-->
<blog-post favorited></blog-post>
<!-- 即便 `false` 是靜態(tài)的，我們仍然需要 `v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
<base-input v-bind:favorited="false">
<!-- 用一個變量進行動態(tài)賦值。-->
<base-input v-bind:favorited="post.currentUserFavorited">

傳入一個數(shù)組

<!-- 即便數(shù)組是靜態(tài)的，我們仍然需要 `v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-- 用一個變量進行動態(tài)賦值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

傳入一個對象

<!-- 即便對象是靜態(tài)的，我們仍然需要 `v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
<blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue' }"></blog-post>

<!-- 用一個變量進行動態(tài)賦值。-->
<blog-post v-bind:post="post"></blog-post>

傳入一個對象的所有屬性

如果你想要將一個對象的所有屬性都作為 prop 傳入，你可以使用不帶參數(shù)的 v-bind (取代 v-bind:prop-name)。例如，對于一個給定的對象 post：

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>

Vue的組件中的props屬性單向數(shù)據(jù)流

所有的 prop都使得其父子prop之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態(tài)，從而導致你的應用的數(shù)據(jù)流向難以理解。

額外的，每次父級組件發(fā)生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告。

這里有兩種常見的試圖改變一個 prop 的情形：

這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數(shù)據(jù)來使用。在這種情況下，最好定義一個本地的 data 屬性并將這個 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
 return {
  counter: this.initialCounter
 }
}

這個 prop 以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個 prop 的值來定義一個計算屬性：

props: ['size'],
computed: {
 normalizedSize: function () {
  return this.size.trim().toLowerCase()
 }
}

注意在 JavaScript 中對象和數(shù)組是通過引用傳入的，所以對于一個數(shù)組或對象類型的 prop 來說，在子組件中改變這個對象或數(shù)組本身將會影響到父組件的狀態(tài)。

Prop 驗證

我們可以為組件的 prop 指定需求。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制臺中警告你。這在開發(fā)一個會被別人用到的組件時尤其有幫助。

為了定制 prop 的驗證方式，你可以為 props 中的值提供一個帶有驗證需求的對象，而不是一個字符串數(shù)組。例如：

Vue.component('my-component', {
 props: {
  // 基礎的類型檢查 (`null` 匹配任何類型)
  propA: Number,
  // 多個可能的類型
  propB: [String, Number],
  // 必填的字符串
  propC: {
   type: String,
   required: true
  },
  // 帶有默認值的數(shù)字
  propD: {
   type: Number,
   default: 100
  },
  // 帶有默認值的對象
  propE: {
   type: Object,
   // 對象或數(shù)組且一定會從一個工廠函數(shù)返回默認值
   default: function () {
    return { message: 'hello' }
   }
  },
  // 自定義驗證函數(shù)
  propF: {
   validator: function (value) {
    // 這個值必須匹配下列字符串中的一個
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
   }
  }
 }
})

當 prop 驗證失敗的時候，(開發(fā)環(huán)境構建版本的) Vue 將會產(chǎn)生一個控制臺的警告。

注意那些 prop 會在一個組件實例創(chuàng)建之前進行驗證，所以實例的屬性 (如 data、computed 等) 在 default 或 validator 函數(shù)中是不可用的。

類型檢查

type 可以是下列原生構造函數(shù)中的一個：

String
 Number
 Boolean
 Function
 Object
 Array
 Symbol

額外的，type 還可以是一個自定義的構造函數(shù)，并且通過 instanceof 來進行檢查確認。例如，給定下列現(xiàn)成的構造函數(shù)：

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

你可以使用：

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

來驗證 author prop 的值是否是通過 new Person 創(chuàng)建的。

非 Prop 的特性

一個非 prop 特性是指傳向一個組件，但是該組件并沒有相應 prop 定義的特性。

因為顯式定義的 prop 適用于向一個子組件傳入信息，然而組件庫的作者并不總能預見組件會被用于怎樣的場景。這也是為什么組件可以接受任意的特性，而這些特性會被添加到這個組件的根元素上。

例如，想象一下你通過一個 Bootstrap 插件使用了一個第三方的 組件，這個插件需要在其 上用到一個 data-date-picker 特性。我們可以將這個特性添加到你的組件實例上：

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

然后這個 data-date-picker=”activated” 特性就會自動添加到<bootstrap-date-input> 的根元素上。

替換/合并已有的特性

想象一下 <bootstrap-date-input> 的模板是這樣的：

<input type="date" class="form-control">

為了給我們的日期選擇器插件定制一個主題，我們可能需要像這樣添加一個特別的類名：

<bootstrap-date-input
 data-date-picker="activated"
 class="date-picker-theme-dark"
></bootstrap-date-input>

在這種情況下，我們定義了兩個不同的 class 的值：

form-control，這是在組件的模板內設置好的
date-picker-theme-dark，這是從組件的父級傳入的

 對于絕大多數(shù)特性來說，從外部提供給組件的值會替換掉組件內部設置好的值。所以如果傳入 type=”text” 就會替換掉 type=”date” 并把它破壞！慶幸的是，class 和 style 特性會稍微智能一些，即兩邊的值會被合并起來，從而得到最終的值：form-control date-picker-theme-dark。

禁用特性繼承

如果你不希望組件的根元素繼承特性，你可以設置在組件的選項中設置 inheritAttrs: false。例如：

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

這尤其適合配合實例的 $attrs 屬性使用，該屬性包含了傳遞給一個組件的特性名和特性值，例如：

{
 class: 'username-input',
 placeholder: 'Enter your username'
}

有了 inheritAttrs: false 和 $attrs，你就可以手動決定這些特性會被賦予哪個元素。在撰寫基礎組件的時候是常會用到的：

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>
 `
})

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

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

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結構的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

以上就是如何在Vue組件中使用prop屬性，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：如何在Vue組件中使用prop屬性
本文地址：http://www.chinadenli.net/article30/pgccpo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、靜態(tài)網(wǎng)站、做網(wǎng)站、響應式網(wǎng)站、虛擬主機、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)