欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue組件選項(xiàng)props實(shí)例詳解

 更新時(shí)間：2017年08月18日 15:49:25   作者：小火柴的藍(lán)色理想  
父組件通過(guò) props 向下傳遞數(shù)據(jù)給子組件，子組件通過(guò) events 給父組件發(fā)送消息。本文將詳細(xì)介紹Vue組件選項(xiàng)props,需要的朋友可以參考下

前面的話(huà)

　　組件接受的選項(xiàng)大部分與Vue實(shí)例一樣，而選項(xiàng)props是組件中非常重要的一個(gè)選項(xiàng)。在 Vue 中，父子組件的關(guān)系可以總結(jié)為 props down, events up。父組件通過(guò) props 向下傳遞數(shù)據(jù)給子組件，子組件通過(guò) events 給父組件發(fā)送消息。本文將詳細(xì)介紹Vue組件選項(xiàng)props

靜態(tài)props

　　組件實(shí)例的作用域是孤立的。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，需要通過(guò)子組件的 props 選項(xiàng)

　　使用Prop傳遞數(shù)據(jù)包括靜態(tài)和動(dòng)態(tài)兩種形式，下面先介紹靜態(tài)props

　　子組件要顯式地用 props 選項(xiàng)聲明它期待獲得的數(shù)據(jù)

var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}

　　靜態(tài)Prop通過(guò)為子組件在父組件中的占位符添加特性的方式來(lái)達(dá)到傳值的目的

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}
var parentNode = {
 template: `
 <div class="parent">
 <child message="aaa"></child>
 <child message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};
// 創(chuàng)建根實(shí)例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

命名約定

　　對(duì)于props聲明的屬性來(lái)說(shuō)，在父級(jí)HTML模板中，屬性名需要使用中劃線(xiàn)寫(xiě)法

var parentNode = {
 template: `
 <div class="parent">
 <child my-message="aaa"></child>
 <child my-message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};

　　子級(jí)props屬性聲明時(shí)，使用小駝峰或者中劃線(xiàn)寫(xiě)法都可以；而子級(jí)模板使用從父級(jí)傳來(lái)的變量時(shí)，需要使用對(duì)應(yīng)的小駝峰寫(xiě)法

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['my-message']
}

動(dòng)態(tài)props

　　在模板中，要?jiǎng)討B(tài)地綁定父組件的數(shù)據(jù)到子模板的 props，與綁定到任何普通的HTML特性相類(lèi)似，就是用 v-bind。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，該變化也會(huì)傳導(dǎo)給子組件

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var parentNode = {
 template: `
 <div class="parent">
 <child :my-message="data1"></child>
 <child :my-message="data2"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return {
 'data1':'aaa',
 'data2':'bbb'
 }
 }
};

傳遞數(shù)字

　　初學(xué)者常犯的一個(gè)錯(cuò)誤是使用字面量語(yǔ)法傳遞數(shù)值

<!-- 傳遞了一個(gè)字符串 "1" -->
<comp some-prop="1"></comp>
<div id="example">
 <my-parent></my-parent>
</div>
<script>
var childNode = {
 template: '<div>{{myMessage}}的類(lèi)型是{{type}}</div>',
 props:['myMessage'],
 computed:{
 type(){
 return typeof this.myMessage
 }
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <my-child my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};
// 創(chuàng)建根實(shí)例
new Vue({
 el: '#example',
 components: {
 'MyParent': parentNode
 }
})
</script>

　　因?yàn)樗且粋€(gè)字面 prop，它的值是字符串 "1" 而不是 number。如果想傳遞一個(gè)實(shí)際的 number，需要使用 v-bind，從而讓它的值被當(dāng)作JS表達(dá)式計(jì)算

<!-- 傳遞實(shí)際的 number -->
<comp v-bind:some-prop="1"></comp>
var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};

　　或者可以使用動(dòng)態(tài)props，在data屬性中設(shè)置對(duì)應(yīng)的數(shù)字1

var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="data"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 },
 data(){
 return {
 'data': 1
 }
 }
};

props驗(yàn)證

　　可以為組件的 props 指定驗(yàn)證規(guī)格。如果傳入的數(shù)據(jù)不符合規(guī)格，Vue會(huì)發(fā)出警告。當(dāng)組件給其他人使用時(shí)，這很有用

　　要指定驗(yàn)證規(guī)格，需要用對(duì)象的形式，而不能用字符串?dāng)?shù)組

Vue.component('example', {
 props: {
 // 基礎(chǔ)類(lèi)型檢測(cè) (`null` 意思是任何類(lèi)型都可以)
 propA: Number,
 // 多種類(lèi)型
 propB: [String, Number],
 // 必傳且是字符串
 propC: {
 type: String,
 required: true
 },
 // 數(shù)字，有默認(rèn)值
 propD: {
 type: Number,
 default: 100
 },
 // 數(shù)組/對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
 propE: {
 type: Object,
 default: function () {
 return { message: 'hello' }
 }
 },
 // 自定義驗(yàn)證函數(shù)
 propF: {
 validator: function (value) {
 return value > 10
 }
 }
 }
})

　　type 可以是下面原生構(gòu)造器

String
Number
Boolean
Function
Object
Array
Symbol

　　type 也可以是一個(gè)自定義構(gòu)造器函數(shù)，使用 instanceof 檢測(cè)。

　　當(dāng) prop 驗(yàn)證失敗，Vue 會(huì)在拋出警告 (如果使用的是開(kāi)發(fā)版本)。props會(huì)在組件實(shí)例創(chuàng)建之前進(jìn)行校驗(yàn)，所以在 default 或 validator 函數(shù)里，諸如 data、computed 或 methods 等實(shí)例屬性還無(wú)法使用

　　下面是一個(gè)簡(jiǎn)單例子，如果傳入子組件的message不是數(shù)字，則拋出警告

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':Number
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg: '123'
 }
 }
};
// 創(chuàng)建根實(shí)例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

　　傳入數(shù)字123時(shí)，則無(wú)警告提示。傳入字符串'123'時(shí)，結(jié)果如下所示

　　將上面代碼中，子組件的內(nèi)容修改如下，可自定義驗(yàn)證函數(shù)，當(dāng)函數(shù)返回為false時(shí)，則輸出警告提示

var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':{
 validator: function (value) {
 return value > 10
 }
 }
 }
}

　　在父組件中傳入msg值為1，由于小于10，則輸出警告提示

var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg:1
 }
 }
};

單向數(shù)據(jù)流

　　prop 是單向綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是不會(huì)反過(guò)來(lái)。這是為了防止子組件無(wú)意修改了父組件的狀態(tài)——這會(huì)讓?xiě)?yīng)用的數(shù)據(jù)流難以理解

　　另外，每次父組件更新時(shí)，子組件的所有 prop 都會(huì)更新為最新值。這意味著不應(yīng)該在子組件內(nèi)部改變 prop。如果這么做了，Vue 會(huì)在控制臺(tái)給出警告

　　下面是一個(gè)典型例子

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: `
 <div class="child">
 <div>
 <span>子組件數(shù)據(jù)</span>
 <input v-model="childMsg">
 </div>
 <p>{{childMsg}}</p>
 </div>
 `,
 props:['childMsg']
}
var parentNode = {
 template: `
 <div class="parent">
 <div>
 <span>父組件數(shù)據(jù)</span>
 <input v-model="msg">
 </div>
 <p>{{msg}}</p>
 <child :child-msg="msg"></child>
 </div>
 `,
 components: {
 'child': childNode
 },
 data(){
 return {
 'msg':'match'
 }
 }
};
// 創(chuàng)建根實(shí)例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

　　父組件數(shù)據(jù)變化時(shí)，子組件數(shù)據(jù)會(huì)相應(yīng)變化；而子組件數(shù)據(jù)變化時(shí)，父組件數(shù)據(jù)不變，并在控制臺(tái)顯示警告

　　修改prop中的數(shù)據(jù)，通常有以下兩種原因

　　1、prop 作為初始值傳入后，子組件想把它當(dāng)作局部數(shù)據(jù)來(lái)用

　　2、prop 作為初始值傳入，由子組件處理成其它數(shù)據(jù)輸出

　　對(duì)于這兩種情況，正確的應(yīng)對(duì)方式是

　　1、定義一個(gè)局部變量，并用 prop 的值初始化它

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

　　2、定義一個(gè)計(jì)算屬性，處理 prop 的值并返回

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

　　[注意]JS中對(duì)象和數(shù)組是引用類(lèi)型，指向同一個(gè)內(nèi)存空間，如果 prop 是一個(gè)對(duì)象或數(shù)組，在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)

總結(jié)

以上所述是小編給大家介紹的Vue組件選項(xiàng)props實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論