Vue學習筆記-深刻組件(prop)

Prop 的大小寫 (camelCase vs kebab-case)

HTML 中的特性名是大小寫不敏感的，因此瀏覽器會把全部大寫字符解釋爲小寫字符。這意味着當你使用 DOM 中的模板時，camelCase (駝峯命名法) 的 prop 名須要使用其等價的 kebab-case (短橫線分隔命名) 命名：

若是你使用字符串模板，那麼這個限制就不存在了。

Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的
 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) <!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

 

Prop 類型：v-bind:title 這種格式

---

 

 

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

以對象形式列出 prop，這些屬性的名稱和值分別是 prop 各自的名稱和類型： props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor
}

 

傳遞靜態或動態 Prop

---

 

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


<!-- 動態賦予一個變量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 動態賦予一個複雜表達式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

上面這兩個咱們都是傳入字符串，咱們也能夠傳入其餘類型

 

傳入一個數字

<!-- 即使 `42` 是靜態的，咱們仍然須要 `v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
<blog-post v-bind:likes="42"></blog-post>

<!-- 用一個變量進行動態賦值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

 

傳入一個布爾值

<!-- 包含該 prop 沒有值的狀況以外，都意味着 `true`。-->
<blog-post is-published></blog-post>

<!-- 即使 `false` 是靜態的，咱們仍然須要 `v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
<blog-post v-bind:is-published="false"></blog-post>

<!-- 用一個變量進行動態賦值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

 

傳入一個數組

<!-- 即使數組是靜態的，咱們仍然須要 `v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- 用一個變量進行動態賦值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

 

傳入一個對象

<!-- 即使對象是靜態的，咱們仍然須要 `v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
<blog-post v-bind:author="{
    name: 'Veronica', company: 'Veridian Dynamics' }" ></blog-post>

<!-- 用一個變量進行動態賦值。-->
<blog-post v-bind:author="post.author"></blog-post>

 

傳入一個對象的全部屬性

若是你想要將一個對象的全部屬性都做爲 prop 傳入，你可使用不帶參數的 v-bind (取代 v-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>

 

單向數據流

---

 

全部的 prop 都使得其父子 prop 之間造成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，可是反過來則不行

額外的，每次父級組件發生更新時，子組件中全部的 prop 都將會刷新爲最新的值。這意味着你不該該在一個子組件內部改變 prop。若是你這樣作了，Vue 會在瀏覽器的控制檯中發出警告。

 

這個 prop 用來傳遞一個初始值；這個子組件接下來但願將其做爲一個本地的 prop 數據來使用。 在這種狀況下，最好定義一個本地的 data 屬性並將這個 prop 用做其初始值： props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 
 這個 prop 以一種原始的值傳入且須要進行轉換。在這種狀況下，最好使用這個 prop 的值來定義一個計算屬性： props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }

 

注意在 JavaScript 中對象和數組是經過引用傳入的，因此對於一個數組或對象類型的 prop 來講，在子組件中改變這個對象或數組自己將會影響到父組件的狀態。

上面的代碼，會一塊兒變得！

 

 

Prop 驗證

---

 `null` 和 `undefined` 會經過任何類型驗證

當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制檯的警告。

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

Vue.component('my-component', { props: { // 基礎的類型檢查 (`null` 和 `undefined` 會經過任何類型驗證)
 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 } } } })

 a:100,//寫null undefined 都能過去

 

 類型檢查: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 } })

 

 

 

 

非 Prop 的特性

---

 一個非 prop 特性是指:傳向一個組件，可是該組件並無相應 prop 定義的特性。

由於顯式定義的 prop 適用於向一個子組件傳入信息，然而組件庫的做者並不總能預見組件會被用於怎樣的場景。

這也是爲何組件能夠接受任意的特性，而這些特性會被添加到這個組件的根元素上。

例如，想象一下你經過一個 Bootstrap 插件使用了一個第三方的 <bootstrap-date-input> 組件，這個插件須要在其 <input> 上用到一個 data-date-picker 特性。咱們能夠將這個特性添加到你的組件實例上：

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

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

template:'<button>{{propA}}-{{propC}}</button>'

 

 

替換/合併已有的特性

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

慶幸的是，class 和 style 特性會稍微智能一些，即兩邊的值會被合併起來，從而獲得最終的值：form-control date-picker-theme-dark。

 

禁用特性繼承

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

 

 注意 inheritAttrs: false 選項不會影響 style 和 class 的綁定。

 

 

//定義組件
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> ` }) 使用: <base-input v-model="username" required placeholder="Enter your username"
></base-input> DOM解析 <input required="required" placeholder="Enter your username" width="1000px">