先來(lái)段官方文檔的代碼：

Vue.component('child', {// camelCase in JavaScriptprops: ['myMessage'],template: '<span>{{ myMessage }}</span>' }) <!-- kebab-case in HTML --> <child my-message="hello!"></child>

props參數(shù)是用來(lái)父?jìng)髯拥摹?/p>

在組件定義中采用駝峰式命名法，在父組件中用“-”來(lái)中間隔開(kāi)，變量“myMessage”和“my-message”其實(shí)表示的是同一個(gè)變量，在定義組件的時(shí)候要寫成駝峰式命名，在父組件中要用“-”隔開(kāi)，在父組件中賦值傳參進(jìn)入子組件。

下面舉個(gè)栗子：

<div id="app"><m-modal modal-title="提醒" v-on:on-ok="ok"></m-modal><m-modal><ul slot="modal-content"><li v-for="item of list">{{item}}</li></ul><div slot="modal-footer"><span>確定</span><span>重置</span><span>返回</span></div></m-modal><m-modal @on-cancel="cancel"></m-modal></div> Vue.component("m-modal",{props:{modalTitle:{type:String,default:'這是一個(gè)模態(tài)框'}},template:`<div class="modal"><div class="modal-header"><h4>{{modalTitle}}</h4></div><div class="modal-content"><div><slot name="modal-content">在這里添加內(nèi)容</slot></div></div><div class="modal-footer"><slot name="modal-footer"><input class="btn blue" type="button" value="確定" @click="okHandle" /><input class="btn" type="button" value="取消" @click="cancelHandle" /></slot></div></div> `,methods:{okHandle(){//通知父組件 點(diǎn)了確定alert("我觸發(fā)了")this.$emit("on-ok");},cancelHandle(){alert('取消了');this.$emit('on-cancel')}}});var list = [...'妙味課堂'];new Vue({el:"#app",data:{list:list},methods:{ok:function (){alert("改變一個(gè)div的樣式") },cancel:function (){alert("取消了，干別的事情") }}});

? ? ?將子組件定義中的modalTitle（默認(rèn)值為“這是一個(gè)模態(tài)框”）通過(guò)父組件中的屬性（modal-title變成父組件中的類似于屬性的東東）賦值：modal-title=“提醒”覆蓋掉了子組件中的默認(rèn)值“這是一個(gè)模態(tài)框”。當(dāng)父組件中modal-title沒(méi)有賦值時(shí)，采用的是子組件的默認(rèn)值。

? ? ?子組件中的方法methods中的this.$emit("on-ok")，括號(hào)里面的參數(shù)表示的是子組件事件名，表示的是觸發(fā)父組件中綁定的事件：v-on:on-ok="ok",ok事件是父組件vue實(shí)例中的方法。

? ? ?綜上所述，子組件中的屬性：（1）props參數(shù)相當(dāng)于子組件的屬性設(shè)置，可以在組件應(yīng)用時(shí)自行設(shè)置屬性值也可以使用子組件定義時(shí)的默認(rèn)值，父組件傳參的作用；（2）methods方法：相當(dāng)于綁定事件，綁定帶有“on-ok”事件所在的作用函數(shù)，點(diǎn)擊后觸發(fā)此綁定的作用函數(shù)，通過(guò)this.$emit("on-ok")和v-on：on-ok=“ok”再觸發(fā)父組件中的“ok”函數(shù)。

渲染結(jié)果：

?

轉(zhuǎn)載于:https://www.cnblogs.com/yeyeyemax/p/6955705.html

總結(jié)

以上是生活随笔為你收集整理的组件中props参数的应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。