位置: IT常識 - 正文
vue中props設置默認值-父組件給子組件傳值的寫法——簡略、帶類型、帶類型和默認值、帶校驗(vue props emit)
編輯：rootadminvue中props設置默認值-父組件給子組件傳值的寫法——簡略、帶類型、帶類型和默認值、帶校驗 vue中props設置默認值-父組件給子組件傳值的寫法——簡略、帶類型、帶類型和默認值、帶校驗1、父子間傳值父傳子在子組件使用 props 選項接收父組件的數(shù)據(jù)。<!-- 父組件 --><template><div><com-child :value="父組件數(shù)據(jù)"></com-child></div></template>
本文鏈接地址:http://esstyw.cn/zhishi/288145.html
轉載請保留說明！
推薦整理分享vue中props設置默認值-父組件給子組件傳值的寫法——簡略、帶類型、帶類型和默認值、帶校驗(vue props emit)，希望有所幫助，僅作參考，歡迎閱讀內容。
文章相關熱門搜索詞:vue props對象默認值設置,vue props 默認值,vuejs props,vue props 默認值,vue props emit,vue如何修改props中的值,vue props 默認值,vue中props的默認寫法和簡寫,內容如對您有幫助，希望把文章鏈接給更多的朋友！
2
<!-- 子組件 --><template> <div> {{value}} </div></template><script> export default { // 父傳子數(shù)據(jù)特點 只讀 props:['value'] //寫法一 }</script>2、props寫法匯總 // 寫法一：常規(guī)寫法props:['value'] //寫法二：帶有類型寫法props: { fieldString: String, fieldNumber: Number, fieldBoolean: Boolean, fieldArray: Array, fieldObject: Object, fieldFunction: Function}// 寫法三：帶有類型和默認值寫法 props: { fieldString: { type: String, default: '' }, fieldNumber: { type: Number, default: 0 }, fieldBoolean: { type: Boolean, default: true }, fieldArray: { type: Array, default: () => [] }, fieldObject: { type: Object, default: () => ({}) }, fieldFunction: { type: Function, default: function () { } } }2.1、props簡略寫法一般情況下 props寫法
props：{obj: { type: Object, default: () => {}},arr: {type: Array,default: () => []}}但是，如果初始化的時候就使用里面的值，可能會出現(xiàn)沒有該值的情況，此時就會報錯。 應該使用以下有默認值的寫法
props：{obj: { type: Object, default: function () { return {obje: ''} }},arr: {type: Array,default: function () { return [] }}}2.2、帶有校驗的寫法我們可以為組件的 prop指定驗證要求，例如你知道的這些類型。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制臺中警告你。
這在開發(fā)一個會被別人用到的組件時尤其有幫助。
props: { // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證) propA: Number, // 多個可能的類型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 帶有默認值的數(shù)字 propD: { type: Number, default: 100 }, // 帶有默認值的對象 propE: { type: Object, // 對象或數(shù)組默認值必須從一個工廠函數(shù)獲取 default: function () { return { message: 'hello' } } }, // 自定義驗證函數(shù) propF: { validator: function (value) { // 這個值必須匹配下列字符串中的一個 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } }3、示例vue中prop會接收不同的數(shù)據(jù)類型**，這里列出了 常用的數(shù)據(jù)類型的設置默認值的寫法,其中包含：Number, String, Boolean, Array, Function, Object。
refAge: {type: Number,default: 0 // 數(shù)字類型，默認0},refName: {type: String,default: '' // 字符串類型，默認''},hotDataLoading: {type: Boolean,default: false // 布爾類型，默認false},hotData: {type: Array,default: () => {return [] // 數(shù)組類型，默認[]}},getParams: {type: Function,default: () => () => {} // 函數(shù)類型，默認{}},meta: {type: Object,default: () => ({}) // 對象類型，默認{}}上一篇：談談linux網絡編程中的應用層協(xié)議定制、Json序列化與反序列化那些事(linux的網絡編程)
下一篇：如何通過無線路由器自身進行流量限制、局域網網速控制？(如何通過無線路由器連接打印機)
