淺談vue-props的default寫不寫有什么區(qū)別
注意 default 不要寫成 defaults
例如有一個名為mk-test的組件如下：
<template>
<div>{{maxLength}}</div>
</template>
<script>
export default {
props: {
maxLength: {
type: Number,
default: 1
}
}
}
</script>
當(dāng)父組件這樣調(diào)用時：
<mk-test></mk-test>
渲染出來是：
1
如果把組件的default:1刪除，父組件調(diào)用方式不變，此時渲染結(jié)果是：
0
此時如果父組件改成：
<mk-test maxLength="3"></mk-test>
此時渲染結(jié)果是：
3
自我總結(jié)：
1、使用default定義默認(rèn)值時，如果父組件有傳值，則用父值渲染。如果父組件沒有傳值，則使用默認(rèn)值。
2、沒有定義默認(rèn)值時，如果父組件有傳值，則用父值渲染。如果父組件沒有傳值，則使用的是該類型的默認(rèn)值。類型及其默認(rèn)值如下：
String ''
Number 0
Array []
Object {}
補充知識：Vue.js中的 new Vue() 和 export default {}區(qū)別
在生成、導(dǎo)出、導(dǎo)入、使用 Vue 組件的時候，常常被位于不同文件的 new Vue() 和 export default{} 。
首先，Vue 是什么？ po 主的理解是 Vue 就是一個構(gòu)造函數(shù)，生成的實例是一個巨大的對象，可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項。
所以渲染的時候，可以使用構(gòu)造 Vue 實例的方式來渲染相應(yīng)的 html 頁面：
new Vue({
el: '#app'
...
})
那么 export default {} 又是？
在復(fù)用組件的時候用到的。
假設(shè)我們寫了一個單頁面組件 A 文件，而在另一個文件 B 里面需要用到它，那么就要用ES6 的 import/export 語法 ，在文件 A 中定義輸出接口 export **，在文件 B 中引入 import **，然后再生成一個 Vue 實例 new Vue (**)，把引入的組件用起來，這樣就可以復(fù)用組件 A 去配合文件 B 生成 html 頁面了。
所以在復(fù)用組件的時候，export 和 new Vue 缺一不可。
以上這篇淺談vue-props的default寫不寫有什么區(qū)別就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue怎樣獲取當(dāng)前時間,并且傳遞給后端(不用注解)
這篇文章主要介紹了vue怎樣獲得當(dāng)前時間,并且傳遞給后端(不用注解)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue使用video.js依賴接入視頻流((hls(m3u8)、flv))的示例代碼
這篇文章給大家介紹了vue如和使用video.js依賴接入視頻流((hls(m3u8)、flv)),文章通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue插值、表達(dá)式、分隔符、指令的相關(guān)知識，文中給大家提到了去除vue插值表達(dá)式{{}}的方法,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關(guān)于怎么安裝離線vue環(huán)境的相關(guān)資料,由于公司要求在內(nèi)網(wǎng)開發(fā)項目,而內(nèi)網(wǎng)不能連接外網(wǎng),因此只能離線安裝vue環(huán)境,需要的朋友可以參考下2023-12-12
vue-admin-template框架搭建及應(yīng)用小結(jié)
?vue-admin-template是基于vue-element-admin的一套后臺管理系統(tǒng)基礎(chǔ)模板（最少精簡版），可作為模板進(jìn)行二次開發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應(yīng)用,需要的朋友可以參考下2023-05-05
基于vue3+TypeScript實現(xiàn)一個簡易的Calendar組件
最近在學(xué)習(xí) react,在學(xué)習(xí)到使用 react 開發(fā) Calendar 組件的時候,突然聯(lián)想到使用 vue 進(jìn)行 Calendar 功能的實現(xiàn),因為目前使用的技術(shù)棧是 vue,剛好可以加深下對 vue3 和 ts 的使用印象,所以本文給大家介紹了基于vue3+TypeScript實現(xiàn)一個簡易的Calendar組件2024-05-05
混入mixin提供了一種非常靈活的方式，來分發(fā)Vue組件中的可復(fù)用功能，一個混入對象可以包含任意組件選項，接下來通過本文給大家介紹VUE?mixin?使用,需要的朋友可以參考下2022-08-08
區(qū)分vue-router的hash和history模式
這篇文章主要介紹了區(qū)分vue-router的hash和history模式，幫助大家更好的理解和學(xué)習(xí)vue路由，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了Monorepo風(fēng)格的組件工程搭建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
vue.js是MVVM結(jié)構(gòu)的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來看看吧。2016-12-12