注意 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寫不寫有什麼區別就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。