vue-props中default寫不寫會有什么不同

這篇文章給大家分享的是有關(guān)vue-props中default寫不寫會有什么不同的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

注意 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 缺一不可。

感謝各位的閱讀！關(guān)于vue-props中default寫不寫會有什么不同就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！