先來段官方文檔的代碼：

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

props參數(shù)是用來父傳子的。

在組件定義中采用駝峰式命名法，在父組件中用“-”來中間隔開，變量“myMessage”和“my-message”其實表示的是同一個變量，在定義組件的時候要寫成駝峰式命名，在父組件中要用“-”隔開，在父組件中賦值傳參進入子組件。

下面舉個栗子：

<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:'這是一個模態(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(){//通知父組件 點了確定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("改變一個div的樣式") },cancel:function (){alert("取消了，干別的事情") }}});

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

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

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

渲染結果：

?

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

總結

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

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