摘要:用一個(gè)變量進(jìn)行動(dòng)態(tài)賦值。傳入一個(gè)對(duì)象即便對(duì)象是靜態(tài)的,我們?nèi)匀恍枰獊砀嬖V這是一個(gè)表達(dá)式而不是一個(gè)字符串。我們可以將這個(gè)特性添加到你的組件實(shí)例上然后這個(gè)特性就會(huì)自動(dòng)添加到的根元素上。
1、prop的大小寫
HTML 中的特性名是大小寫不敏感的,所以瀏覽器會(huì)把所有大寫字符解釋為小寫字符。這意味著當(dāng)你使用 DOM 中的模板時(shí),camelCase (駝峰命名法) 的 prop 名需要使用其等價(jià)的 kebab-case (短橫線分隔命名) 命名:
Vue.component("blog-post", { // 在 JavaScript 中是 camelCase 的 props: ["postTitle"], template: "{{ postTitle }}
" })
注意:如果你使用字符串模板,那么這個(gè)限制就不存在了。
2、prop類型到這里,我們只看到了以字符串?dāng)?shù)組形式列出的 prop:
props: ["title", "likes", "isPublished", "commentIds", "author"]
但是,通常你希望每個(gè) prop 都有指定的值類型。這時(shí),你可以以對(duì)象形式列出 prop,這些屬性的名稱和值分別是 prop 各自的名稱和類型:
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
這不僅為你的組件提供了文檔,還會(huì)在它們遇到錯(cuò)誤的類型時(shí)從瀏覽器的 JavaScript 控制臺(tái)提示用戶。你會(huì)在這個(gè)頁面接下來的部分看到類型檢查和其它 prop 驗(yàn)證。
3、傳遞靜態(tài)或動(dòng)態(tài)prop可以像這樣給 prop 傳入一個(gè)靜態(tài)的值:
你也知道 prop 可以通過 v-bind 動(dòng)態(tài)賦值,例如:
在上述兩個(gè)示例中,我們傳入的值都是字符串類型的,但實(shí)際上任何類型的值都可以傳給一個(gè) prop。
3.1 傳入一個(gè)數(shù)字3.2 傳入一個(gè)布爾值
3.3 傳入一個(gè)數(shù)組
3.4 傳入一個(gè)對(duì)象
3.5 傳入一個(gè)對(duì)象的所有屬性
如果你想要將一個(gè)對(duì)象的所有屬性都作為 prop 傳入,你可以使用不帶參數(shù)的 v-bind (取代 v-bind:prop-name)。例如,對(duì)于一個(gè)給定的對(duì)象 post:
post: { id: 1, title: "My Journey with Vue" }
下面的模板:
等價(jià)于:
4、單向數(shù)據(jù)流
所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定:父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中,但是反過來則不行。這樣會(huì)防止從子組件意外改變父級(jí)組件的狀態(tài),從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。
額外的,每次父級(jí)組件發(fā)生更新時(shí),子組件中所有的 prop 都將會(huì)刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了,Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告。
這里有兩種常見的試圖改變一個(gè) prop 的情形:
1、這個(gè) prop 用來傳遞一個(gè)初始值;這個(gè)子組件接下來希望將其作為一個(gè)本地的 prop 數(shù)據(jù)來使用。在這種情況下,最好定義一個(gè)本地的 data 屬性并將這個(gè) prop 用作其初始值:
props: ["initialCounter"], data: function () { return { counter: this.initialCounter } }
2、這個(gè) prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換。在這種情況下,最好使用這個(gè) prop 的值來定義一個(gè)計(jì)算屬性:
props: ["size"], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
注意在 JavaScript 中對(duì)象和數(shù)組是通過引用傳入的,所以對(duì)于一個(gè)數(shù)組或?qū)ο箢愋偷?prop 來說,在子組件中改變這個(gè)對(duì)象或數(shù)組本身將會(huì)影響到父組件的狀態(tài)。
5、prop驗(yàn)證我們可以為組件的 prop 指定驗(yàn)證要求,例如你知道的這些類型。如果有一個(gè)需求沒有被滿足,則 Vue 會(huì)在瀏覽器控制臺(tái)中警告你。這在開發(fā)一個(gè)會(huì)被別人用到的組件時(shí)尤其有幫助。
為了定制 prop 的驗(yàn)證方式,你可以為 props 中的值提供一個(gè)帶有驗(yàn)證需求的對(duì)象,而不是一個(gè)字符串?dāng)?shù)組。例如:
Vue.component("my-component", { props: { // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會(huì)通過任何類型驗(yàn)證) propA: Number, // 多個(gè)可能的類型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 帶有默認(rèn)值的數(shù)字 propD: { type: Number, default: 100 }, // 帶有默認(rèn)值的對(duì)象 propE: { type: Object, // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取 default: function () { return { message: "hello" } } }, // 自定義驗(yàn)證函數(shù) propF: { validator: function (value) { // 這個(gè)值必須匹配下列字符串中的一個(gè) return ["success", "warning", "danger"].indexOf(value) !== -1 } } } })
當(dāng) prop 驗(yàn)證失敗的時(shí)候,(開發(fā)環(huán)境構(gòu)建版本的) Vue 將會(huì)產(chǎn)生一個(gè)控制臺(tái)的警告。
注意那些 prop 會(huì)在一個(gè)組件實(shí)例創(chuàng)建之前進(jìn)行驗(yàn)證,所以實(shí)例的屬性 (如 data、computed 等) 在 default 或 validator 函數(shù)中是不可用的。
5.1 類型檢查type 可以是下列原生構(gòu)造函數(shù)中的一個(gè):
String
Number
Boolean
Array
Object
Date
Function
Symbol
額外的,type 還可以是一個(gè)自定義的構(gòu)造函數(shù),并且通過 instanceof 來進(jìn)行檢查確認(rèn)。例如,給定下列現(xiàn)成的構(gòu)造函數(shù):
function Person (firstName, lastName) { this.firstName = firstName this.lastName = lastName }
可以使用:
Vue.component("blog-post", { props: { author: Person } })
來驗(yàn)證 author prop 的值是否是通過 new Person 創(chuàng)建的。
6、非prop的特性一個(gè)非 prop 特性是指傳向一個(gè)組件,但是該組件并沒有相應(yīng) prop 定義的特性。
因?yàn)轱@式定義的 prop 適用于向一個(gè)子組件傳入信息,然而組件庫的作者并不總能預(yù)見組件會(huì)被用于怎樣的場景。這也是為什么組件可以接受任意的特性,而這些特性會(huì)被添加到這個(gè)組件的根元素上。
例如,想象一下你通過一個(gè) Bootstrap 插件使用了一個(gè)第三方的
然后這個(gè) data-date-picker="activated" 特性就會(huì)自動(dòng)添加到
想象一下
為了給我們的日期選擇器插件定制一個(gè)主題,我們可能需要像這樣添加一個(gè)特別的類名:
在這種情況下,我們定義了兩個(gè)不同的 class 的值:
form-control,這是在組件的模板內(nèi)設(shè)置好的
date-picker-theme-dark,這是從組件的父級(jí)傳入的
對(duì)于絕大多數(shù)特性來說,從外部提供給組件的值會(huì)替換掉組件內(nèi)部設(shè)置好的值。所以如果傳入 type="text" 就會(huì)替換掉 type="date" 并把它破壞!慶幸的是,class 和 style 特性會(huì)稍微智能一些,即兩邊的值會(huì)被合并起來,從而得到最終的值:form-control date-picker-theme-dark。
6.2 禁用特性繼承如果你不希望組件的根元素繼承特性,你可以在組件的選項(xiàng)中設(shè)置 inheritAttrs: false。例如:
Vue.component("my-component", { inheritAttrs: false, // ... })
這尤其適合配合實(shí)例的 $attrs 屬性使用,該屬性包含了傳遞給一個(gè)組件的特性名和特性值,例如:
{ required: true, placeholder: "Enter your username" }
有了 inheritAttrs: false 和 $attrs,你就可以手動(dòng)決定這些特性會(huì)被賦予哪個(gè)元素。在撰寫基礎(chǔ)組件的時(shí)候是常會(huì)用到的:
Vue.component("base-input", { inheritAttrs: false, props: ["label", "value"], template: ` ` })
inheritAttrs: false 選項(xiàng)不會(huì)影響 style 和 class 的綁定。
這個(gè)模式允許你在使用基礎(chǔ)組件的時(shí)候更像是使用原始的 HTML 元素,而不會(huì)擔(dān)心哪個(gè)元素是真正的根元素:
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/105561.html
摘要:父子組件通信父組件通過向下傳遞數(shù)據(jù)給子組件,子組件通過給父組件發(fā)送消息。是一個(gè)對(duì)象而不是字符串?dāng)?shù)組時(shí),它包含驗(yàn)證要求。狀態(tài)管理由于多個(gè)狀態(tài)分散的跨越在許多組件和交互間,大型應(yīng)用的復(fù)雜度也隨之增長。提供了,可以通過文檔學(xué)習(xí)。 什么是vue vue是一個(gè)前端框架,主要兩個(gè)特點(diǎn):數(shù)據(jù)綁定、組件化。 安裝環(huán)境 根據(jù)教程安裝環(huán)境:node.js、npm、webpack、vue-cli主要的命...
摘要:組件的復(fù)用你可以將組件進(jìn)行任意次數(shù)的復(fù)用注意當(dāng)點(diǎn)擊按鈕時(shí),每個(gè)組件都會(huì)各自獨(dú)立維護(hù)它的。 1、基本示例 // 定義一個(gè)名為 button-counter 的新組件 Vue.component(button-counter, { data: function () { return { count: 0 } }, template: You cli...
摘要:復(fù)選框當(dāng)選中時(shí)當(dāng)沒有選中時(shí)這里的和特性并不會(huì)影響輸入控件的特性,因?yàn)闉g覽器在提交表單時(shí)并不會(huì)包含未被選中的復(fù)選框。 1、基礎(chǔ)用法 v-model指令可以實(shí)現(xiàn)表單元素和Model中數(shù)據(jù)的雙向數(shù)據(jù)綁定。只能運(yùn)用在表單元素中(input、radio、text、address、email、select、checkbox、textarea) 可以用 v-model 指令在表單 、 及 元素上...
摘要:指令的職責(zé)是,當(dāng)表達(dá)式的值改變時(shí),將其產(chǎn)生的連帶影響,響應(yīng)式地作用于。對(duì)象形式佐客湯姆咪口修飾符修飾符是以半角句號(hào)指明的特殊后綴,用于指出一個(gè)指令應(yīng)該以特殊方式綁定。修飾符修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。 指令 指令(Directives)是帶有v-前綴的特殊屬性。指令的職責(zé)是,當(dāng)表達(dá)式的值改變時(shí),將其產(chǎn)生的連帶影響,響應(yīng)式地作用于DOM。 v-if條件判斷 T...
閱讀 3606·2021-11-15 11:38
閱讀 2801·2021-11-11 16:55
閱讀 2551·2021-11-08 13:22
閱讀 2628·2021-11-02 14:45
閱讀 1304·2021-09-28 09:35
閱讀 2568·2021-09-10 10:50
閱讀 463·2019-08-30 15:44
閱讀 2775·2019-08-29 17:06