溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關vue-props中default寫不寫會有什么不同的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
注意 default 不要寫成 defaults
例如有一個名為mk-test的組件如下：
<template>
<div>{{maxLength}}</div>
</template>
<script>
export default {
props: {
maxLength: {
type: Number,
default: 1
}
}
}
</script>當父組件這樣調用時：
<mk-test></mk-test>
渲染出來是：
1
如果把組件的default:1刪除，父組件調用方式不變，此時渲染結果是：
0
此時如果父組件改成：
<mk-test maxLength="3"></mk-test>
此時渲染結果是：
3
自我總結：
1、使用default定義默認值時，如果父組件有傳值，則用父值渲染。如果父組件沒有傳值，則使用默認值。
2、沒有定義默認值時，如果父組件有傳值，則用父值渲染。如果父組件沒有傳值，則使用的是該類型的默認值。類型及其默認值如下：
String ''
Number 0
Array []
Object {}
補充知識：Vue.js中的 new Vue() 和 export default {}區別
在生成、導出、導入、使用 Vue 組件的時候，常常被位于不同文件的 new Vue() 和 export default{} 。
首先，Vue 是什么？ po 主的理解是 Vue 就是一個構造函數，生成的實例是一個巨大的對象，可以包含數據、模板、掛載元素、方法、生命周期鉤子等選項。
所以渲染的時候，可以使用構造 Vue 實例的方式來渲染相應的 html 頁面：
new Vue({
el: '#app'
...
})那么 export default {} 又是？
在復用組件的時候用到的。
假設我們寫了一個單頁面組件 A 文件，而在另一個文件 B 里面需要用到它，那么就要用ES6 的 import/export 語法 ，在文件 A 中定義輸出接口 export **，在文件 B 中引入 import **，然后再生成一個 Vue 實例 new Vue (**)，把引入的組件用起來，這樣就可以復用組件 A 去配合文件 B 生成 html 頁面了。
所以在復用組件的時候，export 和 new Vue 缺一不可。
感謝各位的閱讀！關于vue-props中default寫不寫會有什么不同就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
