點燈坊

失くすものさえない今が強くなるチャンスよ

使用 Default Prop 設定型別

Sam Xiao's Avatar 2020-10-24

Vue 的 data 可提供預設值代表型別方便日後維護，事實上 Component 的 Prop 也能提供預設值代表型別。

Version

Vue 2.6.11

Primitive

prop000

+ 在外層遞增 count state，並以 prop 傳進內層 component，會即時根據 prop 改變而顯示最新 state。

App.vue

<template>
  <div>
    <my-counter :start-count="count"/>
    <button @click="onClick">+</button>
  </div>
</template>

<script>
import MyCounter from '@/components/MyCounter'

let onClick = function() {
  this.count++
}

export default {
  components: {
    MyCounter
  },
  data: () => ({
    count: 8
  }),
  methods: {
    onClick
  }
}
</script>

20 行

data: () => ({
  count: 8
}),

定義 count state，並設定其預設值為 8，可由其預設值得知 count state 型別為 Number。

MyCounter.vue

<template>
  <div>{{ count }}</div>
</template>

<script>
let count = function() {
  return this.startCount
}

export default {
  props: {
    startCount: { default: 0 }
  },
  computed: {
    count
  },
}
</script>

11 行

props: {
  startCount: { default: 0 }
},

定義 startCount prop，並以 default 定義其預設值為 0，可由其預設值得知 startCount prop 型別為 Number。

Array

prop001

Add book 在外層新增 books state，並以 prop 傳進內層 component，會即時根據 prop 改變而顯示最新 state。

App.vue

<template>
  <div>
    <book-shelf :books="books"/>
    <button @click="onAddBook">Add book</button>
  </div>
</template>

<script>
import BookShelf from '@/components/BookShelf'

let onAddBook = function() {
  this.books = [...this.books,
    { title: 'Programming Haskell', price: 400 }
  ]
}

let mounted = function() {
  this.books = [
    { title: 'FP in JavaScript', price: 100 },
    { title: 'RxJS in Action', price: 200 },
    { title: 'Speaking JavaScript', price: 300 }
  ]
}

export default {
  components: {
    BookShelf
  },
  data: () => ({
    books: []
  }),
  methods: {
    onAddBook
  },
  mounted
}
</script>

29 行

data: () => ({
  books: []
}),

定義 books state，並設定其預設值為 [] empty array，可由其預設值得知 books state 型別為 Array。

BookShelf.vue

<template>
  <ul>
    <li v-for="(x, i) in shelf" :key="i">
      {{ x.title }} | {{  x.price }}
    </li>
  </ul>
</template>

<script>
let shelf = function() {
  return this.books
}

export default {
  props: {
    books: { default: () => [] }
  },
  computed: {
    shelf
  }
}
</script>

15 行

props: {
  books: { default: () => [] }
},

定義 books prop，並以 default 定義其預設值為 [] empty array，可由其預設值得知 books prop 型別為 Array。

與 primitive 不同的是 default 不能直接回傳 []，而要回傳 arrow function，並由 function 回傳 []。

Conclusion

  • Prop 若使用 Array 表示，將無法提供任何型別資訊，較不利於日後維護，可學習 data 以預設值提供型別技巧，讓 prop 也能以預設值表示型別
  • Array 的預設值比較特別，須以 function 提供預設值 []

Reference

Vue, Prop Validation

# Vue