Vue組件選項props實例詳解
前面的話
組件接受的選項大部分與Vue實例一樣，而選項props是組件中非常重要的一個選項。在 Vue 中，父子組件的關系可以總結為 props down, events up。父組件通過 props 向下傳遞數(shù)據給子組件，子組件通過 events 給父組件發(fā)送消息。本文將詳細介紹Vue組件選項props
靜態(tài)props
組件實例的作用域是孤立的。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數(shù)據。要讓子組件使用父組件的數(shù)據，需要通過子組件的 props 選項
使用Prop傳遞數(shù)據包括靜態(tài)和動態(tài)兩種形式，下面先介紹靜態(tài)props
子組件要顯式地用 props 選項聲明它期待獲得的數(shù)據
var childNode = {
template: '<div>{{message}}</div>',
props:['message']
}
靜態(tài)Prop通過為子組件在父組件中的占位符添加特性的方式來達到傳值的目的
<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)建根實例
new Vue({
el: '#example',
components: {
'parent': parentNode
}
})
</script>
命名約定
對于props聲明的屬性來說，在父級HTML模板中，屬性名需要使用中劃線寫法
var parentNode = {
template: `
<div class="parent">
<child my-message="aaa"></child>
<child my-message="bbb"></child>
</div>`,
components: {
'child': childNode
}
};
子級props屬性聲明時，使用小駝峰或者中劃線寫法都可以；而子級模板使用從父級傳來的變量時，需要使用對應的小駝峰寫法
var childNode = {
template: '<div>{{myMessage}}</div>',
props:['myMessage']
}
var childNode = {
template: '<div>{{myMessage}}</div>',
props:['my-message']
}
動態(tài)props
在模板中，要動態(tài)地綁定父組件的數(shù)據到子模板的 props，與綁定到任何普通的HTML特性相類似，就是用 v-bind。每當父組件的數(shù)據變化時，該變化也會傳導給子組件
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ù)字
初學者常犯的一個錯誤是使用字面量語法傳遞數(shù)值
<!-- 傳遞了一個字符串 "1" -->
<comp some-prop="1"></comp>
<div id="example">
<my-parent></my-parent>
</div>
<script>
var childNode = {
template: '<div>{{myMessage}}的類型是{{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)建根實例
new Vue({
el: '#example',
components: {
'MyParent': parentNode
}
})
</script>
因為它是一個字面 prop，它的值是字符串 "1" 而不是 number。如果想傳遞一個實際的 number，需要使用 v-bind，從而讓它的值被當作JS表達式計算
<!-- 傳遞實際的 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
}
};
或者可以使用動態(tài)props，在data屬性中設置對應的數(shù)字1
var parentNode = {
template: `
<div class="parent">
<my-child :my-message="data"></my-child>
</div>`,
components: {
'myChild': childNode
},
data(){
return {
'data': 1
}
}
};
props驗證
可以為組件的 props 指定驗證規(guī)格。如果傳入的數(shù)據不符合規(guī)格，Vue會發(fā)出警告。當組件給其他人使用時，這很有用
要指定驗證規(guī)格，需要用對象的形式，而不能用字符串數(shù)組
Vue.component('example', {
props: {
// 基礎類型檢測 (`null` 意思是任何類型都可以)
propA: Number,
// 多種類型
propB: [String, Number],
// 必傳且是字符串
propC: {
type: String,
required: true
},
// 數(shù)字，有默認值
propD: {
type: Number,
default: 100
},
// 數(shù)組/對象的默認值應當由一個工廠函數(shù)返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定義驗證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
}
}
})
type 可以是下面原生構造器
String Number Boolean Function Object Array Symbol
type 也可以是一個自定義構造器函數(shù)，使用 instanceof 檢測。
當 prop 驗證失敗，Vue 會在拋出警告 (如果使用的是開發(fā)版本)。props會在組件實例創(chuàng)建之前進行校驗，所以在 default 或 validator 函數(shù)里，諸如 data、computed 或 methods 等實例屬性還無法使用
下面是一個簡單例子，如果傳入子組件的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)建根實例
new Vue({
el: '#example',
components: {
'parent': parentNode
}
})
</script>
傳入數(shù)字123時，則無警告提示。傳入字符串'123'時，結果如下所示
將上面代碼中，子組件的內容修改如下，可自定義驗證函數(shù)，當函數(shù)返回為false時，則輸出警告提示
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ù)據流
prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態(tài)——這會讓應用的數(shù)據流難以理解
另外，每次父組件更新時，子組件的所有 prop 都會更新為最新值。這意味著不應該在子組件內部改變 prop。如果這么做了，Vue 會在控制臺給出警告
下面是一個典型例子
<div id="example">
<parent></parent>
</div>
<script>
var childNode = {
template: `
<div class="child">
<div>
<span>子組件數(shù)據</span>
<input v-model="childMsg">
</div>
<p>{{childMsg}}</p>
</div>
`,
props:['childMsg']
}
var parentNode = {
template: `
<div class="parent">
<div>
<span>父組件數(shù)據</span>
<input v-model="msg">
</div>
<p>{{msg}}</p>
<child :child-msg="msg"></child>
</div>
`,
components: {
'child': childNode
},
data(){
return {
'msg':'match'
}
}
};
// 創(chuàng)建根實例
new Vue({
el: '#example',
components: {
'parent': parentNode
}
})
</script>
父組件數(shù)據變化時，子組件數(shù)據會相應變化；而子組件數(shù)據變化時，父組件數(shù)據不變，并在控制臺顯示警告
修改prop中的數(shù)據，通常有以下兩種原因
1、prop 作為初始值傳入后，子組件想把它當作局部數(shù)據來用
2、prop 作為初始值傳入，由子組件處理成其它數(shù)據輸出
對于這兩種情況，正確的應對方式是
1、定義一個局部變量，并用 prop 的值初始化它
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
2、定義一個計算屬性，處理 prop 的值并返回
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
[注意]JS中對象和數(shù)組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數(shù)組，在子組件內部改變它會影響父組件的狀態(tài)
總結
以上所述是小編給大家介紹的Vue組件選項props實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
vue-cli-service不是內部或外部命令,也不是可運行的程序或批處理文件問題
在Vue項目構建過程中,如果遇到無法識別'vue-cli-service'命令的錯誤提示,通常是因為沒有全局安裝vue-cli,解決這個問題的步驟主要包括：首先檢查Vue版本,如果未安裝則先安裝Vue；其次全局安裝vue-cli；若在安裝過程中遇到cnpm命令找不到的情況2024-10-10
這篇文章主要為大家詳細介紹了vue3.0實現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue+elementUI封裝一個根據后端變化的動態(tài)table(完整代碼)
這篇文章主要介紹了vue+elementUI,封裝一個根據后端變化的動態(tài)table,實現(xiàn)了自動生成和插槽兩個方式，主要把el-table 和el-pagination封裝在一起，結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-08-08
vue2 前后端分離項目ajax跨域session問題解決方法
本篇文章主要介紹了vue2 前后端分離項目ajax跨域session問題解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
vue使用video插件vue-video-player詳解
這篇文章主要為大家詳細介紹了vue使用video插件vue-video-player，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了vue3.0中setup的兩個注意點，本文通過兩種用法給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
本篇文章主要介紹了Vue 表單控件綁定的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
解決vue組件沒顯示,沒起作用,沒報錯,但該顯示的組件沒顯示問題
這篇文章主要介紹了解決vue組件沒顯示,沒起作用,沒報錯,但該顯示的組件沒顯示問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本篇文章主要介紹了Vue-Router模式和鉤子的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了vue獲取DOM節(jié)點的常用方法,使用ref屬性,使用$el屬性,使用querySelector和querySelectorAll,使用$refs和querySelector,這幾種方法,需要的朋友可以參考下2023-10-10