使用 defineProps() 定義 Prop | 點燈坊

從 Vue 3 開始，Vue 經過多次語法演進，到目前 Vue 3.2 所提供的 Script Setup 後，Vue 的寫法總算穩定下來，改用 defineProps() 定義 Prop，也是目前 Vue 官網範例的正式寫法，但還是有不少網路上範例或書籍用的是 Vue 3 早期寫法，雖然不再建議這樣寫，但還是得看得懂，並藉此了解 Vue 語法的演變軌跡。

Version

Vue 3.4

Prop

<template>
  <MyComponent :name />
</template>

<script setup>
import { ref } from 'vue'
import MyComponent from '@/components/MyComponent.vue'

let name = ref('Sam')
</script>

• 自行定義 MyComponent，並將資料傳進 name prop

Prop 類似 function 的參數，可將資料透過 prop 傳進 component

Options API

MyComponent.vue

<template>{{ helloWorld }}</template>

<script>
export default {
  props: {
    name: String
  },
  computed: {
    helloWorld() {
      return `Hello ${this.name}`
    }
  }
}
</script>

• Options API 定義 prop
• props：在 props key 下定義 prop
• 使用 this 存取 prop

Composition API

MyComponent.vue

<template>{{ helloWorld }}</template>

<script>
import { computed } from 'vue'

export default {
  props: {
    name: String
  },
  setup(props) {
    let helloWorld = computed(() => `Hello ${props.name}`)

    return {
      helloWorld
    }
  }
}
</script>

• Vue 3.0 與 3.1 所使用語法
• Composition API 必須在 setup() 中 組合 後才可使用，並透過 props Object 讀取 prop

Script Setup

<template>{{ helloWorld }}</template>

<script setup>
import { computed } from 'vue'

let props = defineProps({ name: String })
let helloWorld = computed(() => `Hello ${props.name}`)
</script>

• 使用 defineProps() compiler macro 展開，並透過 props Object 讀取 prop

Conclusion

• defineProps() 只是 compiler macro，因此並不需要 import