這次我們講講Vue.js中組件中“傳參”的概念，也就是父組件向子組件通信的問題碟案，這一點(diǎn)與函數(shù)中的參數(shù)傳遞很像星立。
我們同樣使用上篇文章中的例子：
<!--HTML-->
<pop-tips ref="tips"></pop-tips>
//pop-tips組件
Vue.component('pop-tips',{
data: function(){
return {
popShow: false,
popText: ''
}
},
template: '<div class="pop-tips" :class="{show: popShow}"><span>{{popText}}</span></div>',
methods: {
popTips: function(text){
var _this = this;
this.popShow = true;
this.popText = text;
setTimeout(function () {
_this.popShow = false;
},2000);
}
}
});
這個(gè)例子中，pop-tips文字提示顯示出來后會(huì)在2秒之后消失厨姚，但是如果我想要讓它1秒后消失呢？
你可能會(huì)說那還不簡單键菱，直接把組件中的2000改成1000不就行了嘛谬墙。
你作為一個(gè)開發(fā)組件的人改起來當(dāng)然容易，但是組件使用者可能不止你一個(gè)人哦经备，其他人可不想關(guān)心你組件的具體實(shí)現(xiàn)代碼拭抬！
那么這時(shí)候組件的靈活性就顯得非常重要，我們能不能像函數(shù)傳參一樣直接給組件傳個(gè)時(shí)間參數(shù)就能改變pop-tips組件的顯示時(shí)長呢侵蒙？
答案當(dāng)然是肯定的造虎，例如：
<!--HTML-->
<pop-tips ref="tips" :duration="1"></pop-tips> <!--傳入的參數(shù)名為duration，參數(shù)值為1纷闺，表示1s后消失-->
需要注意的是算凿，這里duration前需要加上v-bind:或者:，因?yàn)檫@里需要傳入的是數(shù)字1犁功，如果直接寫duration="1"氓轰，那么傳入組件的將會(huì)是個(gè)字符串！浸卦！
//pop-tips組件
Vue.component('pop-tips',{
props: ['duration'], // 用于接收外部所傳入的數(shù)據(jù)
data: function(){
return {
popShow: false,
popText: ''
}
},
template: '<div class="pop-tips" :class="{show: popShow}"><span>{{popText}}</span></div>',
methods: {
popTips: function(text){
var _this = this;
this.popShow = true;
this.popText = text;
setTimeout(function () {
_this.popShow = false;
},this.duration*1000); // 調(diào)用外部數(shù)據(jù)時(shí)與調(diào)用data中數(shù)據(jù)的方式一致
}
}
});
我們可以在定義組件時(shí)署鸡，給選項(xiàng)對(duì)象添加一個(gè)props屬性，該屬性可以是一個(gè)數(shù)組限嫌，其中的元素是組件HTML的部分所定義的自定義屬性名稱（如示例中的duration屬性）靴庆，這時(shí)候在組件內(nèi)部我們就可以像使用組件內(nèi)部數(shù)據(jù)一樣使用這些外部傳進(jìn)來的數(shù)據(jù)了。
但是怒医，這樣做可能會(huì)造成一些意外的情況炉抒。比如說另一個(gè)開發(fā)者拿到這個(gè)組件，但是他并不知道要傳這個(gè)duration（可能以為它有個(gè)默認(rèn)的時(shí)間）稚叹，或者他一不小心傳錯(cuò)了數(shù)據(jù)類型端礼，等等禽笑。
對(duì)于這種情況，我們可以對(duì)該組件繼續(xù)進(jìn)一步的改進(jìn)蛤奥，以提高代碼的健壯性。例如：
//pop-tips組件
Vue.component('pop-tips',{
props: { // 用于接收外部所傳入的數(shù)據(jù)
duration: {
type: Number, // 必須是數(shù)字類型
default: 2, // 不寫該屬性時(shí)默認(rèn)為2
validator: function (value) {
return value <= 3; // 校驗(yàn)必須小于或等于3
}
}
},
// ……
});
或者不寫默認(rèn)值僚稿，而是強(qiáng)制要求寫上duration屬性：
//pop-tips組件
Vue.component('pop-tips',{
props: { // 用于接收外部所傳入的數(shù)據(jù)
duration: {
type: Number, // 必須是數(shù)字類型
required: true, // 強(qiáng)制要求寫該屬性
validator: function (value) {
return value <= 3; // 校驗(yàn)必須小于或等于3
}
}
},
// ……
});
通過以上代碼我們可以知道凡桥，組件定義中的選項(xiàng)對(duì)象的props屬性除了可以是數(shù)組外，還可以是對(duì)象蚀同，而對(duì)象名就是外部傳入的參數(shù)名缅刽，對(duì)象值可以是個(gè)對(duì)象，其中可以包含參數(shù)類型蠢络、默認(rèn)值衰猛、是否必傳、校驗(yàn)方法等刹孔。
有了上面這些限制之后啡省，組件的使用者就得按照這些規(guī)則來使用了，一旦不符合某個(gè)規(guī)則髓霞，那么控制臺(tái)就可能會(huì)有相應(yīng)的警告提示卦睹。
結(jié)束語： 有關(guān)Vue.js組件“傳參”今天就講到這里，總之就是使用props來實(shí)現(xiàn)父組件到子組件的數(shù)據(jù)傳遞方库。
