Vue 元件之使用props傳遞資料
元件不僅僅是要把模板的內容進行復用,更重要的是元件間的通訊。通常父元件的模板中包含子元件,父元件要正向的向子元件傳遞資料或者引數,子元件接收到後根據引數的不同來進行對應的渲染。這個正向的資料傳遞在vue元件中就是通過props來實現的。
在元件中,我們首先需要使用選項props申明需要從父元件接收的資料,字串陣列的props的傳遞如下:
示例:
子元件
<template>
<div>
<p>我是子元件,接收來自父元件的資訊:{{message}}</p>
</div>
</template>
<script >
export default {
name: "child",
props: ['message']
}
</script>
<style scoped></style>
父元件
<template>
<div>
<p>我是父元件,傳遞訊息給子元件,需要傳遞的訊息在下面輸入:</p>
<p><input type="text" v-model="message"/></p>
<child :message="message" ></child>
</div>
</template>
<script>
import child from './VComChild'
export default {
name: "parent",
data(){
return{
message:''
}
},
components : {
'child': child
}
}
</script>
<style scoped></style>
其中:
props: ['message']
就是我們使用props的語法,執行效果:
其中如果我們要傳遞多個引數,可以在props的陣列中直接加入我們要接收的引數的名稱就好:
props: ['message','datas']
另外,在傳遞引數的時候,可以直接傳遞固定的資料,也可以傳遞動態資料。在傳遞動態資料的時候需要使用v-bind來動態繫結props的值,就像上面的一樣。而向字串的話則不需要v-bind
<child :message="message" datas="haha"></child>
在實際的業務中我們經常會碰到下面的情況:
1.父元件傳遞初始值進來,子元件將它作為初始值儲存起來,然後在自己的作用域內使用。還是拿上面的例子來說:
<template>
<div>
<p>我是子元件,接收來自父元件的資訊:{{sub_message}}</p>
<p>子元件輸入:<input v-model="sub_message"/></p>
</div>
</template>
<script>
export default {
name: "child",
props: ['message'],
data(){
return{
sub_message:this.message
}
}
}
</script>
<style scoped></style>
父元件中我們給message設定一個初始值:
data(){
return{
message:'初始資訊'
}
}
此時,我們執行程式:
大家可以看到,修改父元件資料後沒有對子元件產生任何影響,反過來,我們修改子元件內的sub_message:this屬性,也不會影響父元件。
2.props作為需要被轉變的原始值傳入,這種情況下我們可以使用計算屬性來完成:
<template>
<div>
<p>我是子元件,接收來自父元件的資訊:{{sub_message}}</p>
</div>
</template>
<script>
export default {
name: "child",
props: ['message'],
computed: {
sub_message() {
return this.message + "--來自父元件的訊息"
}
}
}
</script>
<style scoped></style>
執行效果:
props資料驗證
在我們需要對自己的元件進行資料驗證時,此時使用props就需要使用物件寫法了。此時驗證的型別可以如下:
String
Number
Boolean
Object
Array
Function
下面我們就通過一個例子來看一下:
<template>
<div>
<template>
<div>
<p>props_number:{{props_number}}</p>
<p>props_string_number:{{props_string_number}}</p>
<p>props_boolean:{{props_boolean}}</p>
<p>props_must:{{props_must}}</p>
<p>props_obj_arr:{{props_obj_arr}}</p>
<p>props_function:{{props_function}}</p>
</div>
</template>
<script>
export default {
name: "child",
props: {
// 必須是數字型別
props_number: Number,
// 必須是數字或者字串
props_string_number: [String, Number],
// 必須是布林值,如果沒有定義,預設值就是true
props_boolean: {
type: Boolean,
default: true
},
// 必須是數字,而且必須傳遞
props_must: {
type: Number,
required: true
},
// 如果時數字或者物件,預設值必須時一個函式來返回
props_obj_arr: {
type: Array,
default() {
return [1, 2]
}
},
// 自定義一個驗證函式
props_function: {
validate(value) {
return value > 20
}
}
}
}
</script>
<style scoped></style>
</div>
</template>
<script>
export default {
name: "child",
props: {
// 必須是數字型別
props_number: Number,
// 必須是數字或者字串
props_string_number: [String, Number],
// 必須是布林值,如果沒有定義,預設值就是true
props_boolean: {
type: Boolean,
default: true
},
// 必須是數字,而且必須傳遞
props_must: {
type: Number,
required: true
},
// 如果時數字或者物件,預設值必須時一個函式來返回
props_obj_arr: {
type: Array,
default() {
return [1, 2]
}
},
// 自定義一個驗證函式
props_function: {
validator(value) {
return value > 10
}
}
}
}
</script>
<style scoped></style>
這裡我們在子元件裡面定義了我們常見的幾種用法,然後在父元件中為這些資訊傳遞值:
<child :props_number="10"
:props_string_number="message"
:props_boolean="false"
:props_obj_arr="[1,2,3]"
:prop_must="20"
:props_function="20">
</child>
執行程式:
讓我們修改幾個屬性的值,來看下我們設定的這些驗證是否是有作用,我們去掉必須要傳遞的prop_must,然後在控制檯檢視:
這裡我們說明一下,當props的驗證失敗的時候,開發版本下會在控制檯輸出一條警告,就像你們上面看到的一樣。而在正式版本中vue則會拒絕輸入值。