Vue props用法詳解(小結(jié))
Vue props用法詳解
組件接受的選項之一 props 是 Vue 中非常重要的一個選項。父子組件的關(guān)系可以總結(jié)為：
props down, events up
父組件通過 props 向下傳遞數(shù)據(jù)給子組件；子組件通過 events 給父組件發(fā)送消息。
父子級組件
比如我們需要創(chuàng)建兩個組件 parent 和 child。需要保證每個組件可以在相對隔離的環(huán)境中書寫，這樣也能提高組件的可維護性。
這里我們先定義父子兩個組件和一個 Vue 對象：
var childNode = {
template: `
<div>childNode</div>
`
};
var parentNode = {
template: `
<div>
<child></child>
<child></child>
</div>
`,
components: {
child: childNode
}
};
new Vue({
el: "#example",
components: {
parent: parentNode
}
});
<div id="example"> <parent></parent> </div>
這里的 childNode 定義的 template 是一個 div，并且內(nèi)容是"childNode"字符串。
而在 parentNode 的 template 中定義了 div 的 class 名叫 parent 并且包含了兩個 child 組件。
如果大家想對VUE.JS有更加深入系統(tǒng)的學習，可以參閱 Vue.js實戰(zhàn) PDF高質(zhì)量掃描版 這本經(jīng)典讀物
靜態(tài) props
組件實例的作用域是孤立的。這意味著不能（也不應(yīng)該）在子組件的模板中直接飲用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，需要通過子組件的 props 選項。
父組件向子組件傳遞數(shù)據(jù)分為兩種方式：動態(tài)和靜態(tài)，這里先介紹靜態(tài)方式。
子組件要顯示的用 props 聲明它期望獲得的數(shù)據(jù)
修改上例中的代碼，給 childNode 添加一個 props 選項和需要的forChildMsg數(shù)據(jù);
然后在父組件中的占位符添加特性的方式來傳遞數(shù)據(jù)。
var childNode = {
template: `
<div>
{{forChildMsg}}
</div>
`,
props: ["for-child-msg"]
};
var parentNode = {
template: `
<div>
<p>parentNode</p>
<child for-child-msg="aaa"></child>
<child for-child-msg="bbb"></child>
</div>
`,
components: {
child: childNode
}
};
命名規(guī)范
對于 props 聲明的屬性，在父組件的 template 模板中，屬性名需要使用中劃線寫法；
子組件 props 屬性聲明時，使用小駝峰或者中劃線寫法都可以；而子組件的模板使用從父組件傳來的變量時，需要使用對應(yīng)的小駝峰寫法。別擔心，Vue 能夠正確識別出小駝峰和下劃線命名法混用的變量，如這里的forChildMsg和for-child-msg是同一值。
動態(tài) props
在模板中，要動態(tài)地綁定父組件的數(shù)據(jù)到子組件模板的 props，和綁定 Html 標簽特性一樣，使用v-bind綁定；
基于上述靜態(tài) props 的代碼，這次只需要改動父組件：
var parentNode = {
template: `
<div>
<p>parentNode</p>
<child :for-child-msg="childMsg1"></child>
<child :for-child-msg="childMsg2"></child>
</div>
`,
components: {
child: childNode
},
data: function() {
return {
childMsg1: "Dynamic props msg for child-1",
childMsg2: "Dynamic props msg for child-2"
};
}
};
在父組件的 data 的 return 數(shù)據(jù)中的 childMsg1 和 childMsg2 會被傳入子組件中，
props 驗證
驗證傳入的 props 參數(shù)的數(shù)據(jù)規(guī)格，如果不符合數(shù)據(jù)規(guī)格，Vue 會發(fā)出警告。
能判斷的所有種類（也就是 type 值）有：String, Number, Boolean, Function, Object, Array, Symbol
Vue.component("example", {
props: {
// 基礎(chǔ)類型檢測, null意味著任何類型都行
propA: Number,
// 多種類型
propB: [String, Number],
// 必傳且是String
propC: {
type: String,
required: true
},
// 數(shù)字有默認值
propD: {
type: Number,
default: 101
},
// 數(shù)組、默認值是一個工廠函數(shù)返回對象
propE: {
type: Object,
default: function() {
console.log("propE default invoked.");
return { message: "I am from propE." };
}
},
// 自定義驗證函數(shù)
propF: {
isValid: function(value) {
return value > 100;
}
}
}
});
let childNode = {
template: "<div>{{forChildMsg}}</div>",
props: {
"for-child-msg": Number
}
};
let parentNode = {
template: `
<div class="parent">
<child :for-child-msg="msg"></child>
</div>
`,
components: {
child: childNode
},
data() {
return {
// 當這里是字符串 "123456"時會報錯
msg: 123456
};
}
};
還可以在 props 定義的數(shù)據(jù)中加入自定義驗證函數(shù)，當函數(shù)返回 false 時，輸出警告。
比如我們把上述例子中的 childNode 的for-child-msg修改成一個對象，并包含一個名叫validator的函數(shù)，該命名是規(guī)定叫validator的，自定義函數(shù)名不會生效。
let childNode = {
template: "<div>{{forChildMsg}}</div>",
props: {
"for-child-msg": {
validator: function(value) {
return value > 100;
}
}
}
};
在這里我們給for-child-msg變量設(shè)置了validator函數(shù)，并且要求傳入的值必須大于 100，否則報出警告。
單向數(shù)據(jù)流
props 是單向綁定的：當父組件的屬性變化時，將傳導(dǎo)給子組件，但是不會反過來。這是為了防止子組件五一修改父組件的狀態(tài)。
所以不應(yīng)該在子組件中修改 props 中的值，Vue 會報出警告。
let childNode = {
template: `
<div class="child">
<div>
<span>子組件數(shù)據(jù)</span>
<input v-model="forChildMsg"/>
</div>
<p>{{forChildMsg}}</p>
</div>`,
props: {
"for-child-msg": String
}
};
let parentNode = {
template: `
<div class="parent">
<div>
<span>父組件數(shù)據(jù)</span>
<input v-model="msg"/>
</div>
<p>{{msg}}</p>
<child :for-child-msg="msg"></child>
</div>
`,
components: {
child: childNode
},
data() {
return {
msg: "default string."
};
}
};
這里我們給父組件和子組件都有一個輸入框，并且顯示出父組件數(shù)據(jù)和子組件的數(shù)據(jù)。當我們在父組件的輸入框輸入新數(shù)據(jù)時，同步的子組件數(shù)據(jù)也被修改了；這就是 props 的向子組件傳遞數(shù)據(jù)。而當我們修改子組件的輸入框時，瀏覽器的控制臺則報出錯誤警告
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "forChildMsg"
修改 props 數(shù)據(jù)
通常有兩種原因：
- prop 作為初始值傳入后，子組件想把它當做局部數(shù)據(jù)來用
- prop 作為初始值傳入后，由子組件處理成其他數(shù)據(jù)輸出
應(yīng)對辦法是
定義一個局部變量，并用 prop 的值初始化它
但是由于定義的 ownChildMsg 只能接受 forChildMsg 的初始值，當父組件要傳遞的值變化發(fā)生時，ownChildMsg 無法收到更新。
let childNode = {
template: `
<div class="child">
<div>
<span>子組件數(shù)據(jù)</span>
<input v-model="forChildMsg"/>
</div>
<p>{{forChildMsg}}</p>
<p>ownChildMsg : {{ownChildMsg}}</p>
</div>`,
props: {
"for-child-msg": String
},
data() {
return { ownChildMsg: this.forChildMsg };
}
};
這里我們加了一個<p>用于查看 ownChildMsg 數(shù)據(jù)是否變化，結(jié)果發(fā)現(xiàn)只有默認值傳遞給了 ownChildMsg，父組件改變只會變化到 forChildMsg，不會修改 ownChildMsg。
定義一個計算屬性，處理 prop 的值并返回
由于是計算屬性，所以只能顯示值，不能設(shè)置值。我們這里設(shè)置的是一旦從父組件修改了 forChildMsg 數(shù)據(jù)，我們就把 forChildMsg 加上一個字符串"---ownChildMsg"，然后顯示在屏幕上。這時是可以每當父組件修改了新數(shù)據(jù)，都會更新 ownChildMsg 數(shù)據(jù)的。
let childNode = {
template: `
<div class="child">
<div>
<span>子組件數(shù)據(jù)</span>
<input v-model="forChildMsg"/>
</div>
<p>{{forChildMsg}}</p>
<p>ownChildMsg : {{ownChildMsg}}</p>
</div>`,
props: {
"for-child-msg": String
},
computed: {
ownChildMsg() {
return this.forChildMsg + "---ownChildMsg";
}
}
};
更加妥帖的方式是使用變量存儲 prop 的初始值，并用 watch 來觀察 prop 值得變化。發(fā)生變化時，更新變量的值。
let childNode = {
template: `
<div class="child">
<div>
<span>子組件數(shù)據(jù)</span>
<input v-model="forChildMsg"/>
</div>
<p>{{forChildMsg}}</p>
<p>ownChildMsg : {{ownChildMsg}}</p>
</div>`,
props: {
"for-child-msg": String
},
data() {
return {
ownChildMsg: this.forChildMsg
};
},
watch: {
forChildMsg() {
this.ownChildMsg = this.forChildMsg;
}
}
};
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-Router路由是根據(jù)不同的url地址展現(xiàn)不同的內(nèi)容或頁面,這篇文章主要給大家介紹了關(guān)于Vue3中如何使用Vue?Router的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了利用vueJs實現(xiàn)圖片輪播實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue下拉框值變動事件傳多個參數(shù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
vue深拷貝的三種實現(xiàn)方式：1、通過遞歸方式實現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實現(xiàn)深拷貝,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了vue中如何攜帶參數(shù)跳轉(zhuǎn)頁面問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue.js中關(guān)于點擊事件方法的使用(click)
這篇文章主要介紹了vue.js中關(guān)于點擊事件方法的使用(click)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了vue3封裝自己的分頁組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
在組件實例中，Vue提供了相應(yīng)的屬性，包括$parent、$children、$refs和$root，這些屬性都掛載在組件的this上。本文將詳細介紹Vue組件實例間的直接訪問,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了配置一個vue3.0項目的完整步驟，從0開始配置一個vue項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue中優(yōu)雅實現(xiàn)數(shù)字遞增特效的詳細過程
項目中需要做數(shù)字滾動增加的效果,一開始很懵,研究了一下原理,發(fā)現(xiàn)很簡單,下面這篇文章主要給大家介紹了關(guān)于vue中優(yōu)雅實現(xiàn)數(shù)字遞增特效的詳細過程,需要的朋友可以參考下2022-12-12