Vue3 component 單檔案元件(SFC)示範(使用元件、傳入參數)

註：本篇使用 Composition API 和 script setup 語法糖(syntactic sugar)

寫了一個 .vue 的元件檔案，該如何使用呢？

假設建立了一個 UserData.vue，最簡單的使用方式就是 import 後就可以使用了:

    
<script setup>
import UserData from "@/components/UserData.vue";
</script>

<template>
  <UserData></UserData>
</template>
    

因為在 HTML 語法中沒有區分大小寫，所以通常我們會使用連字符命名法(Kebab-case)，將 UserData 命名為 user-data ，然後才在 HTML 中使用:

    
<script setup>
import UserData from "@/components/UserData.vue";
import {defineComponent} from "vue";

defineComponent({
  components: {'user-data': UserData}
})

</script>

<template>
  <user-data></user-data>
</template>
    

傳入參數: props

在 UserData.vue 中我們定義兩個可以傳入的參數 name 和 email，並顯示在畫面上。需要指定傳入參數的資料型別，接受的參數類型為: String, Number, Boolean, Array, Object, Date, Function, Symbol，若支援多種類型則可以使用 Array 的方式，例如: [String, Number]

    
<template>
  name: {{ name }}
  <br/>
  email: {{ email }}
</template>

<script setup>
import {defineProps} from "vue";

defineProps({
  name: String,
  email: String,
})

</script>
    

傳入的方式:

    
<script setup>
import UserData from "@/components/UserData.vue";
import {defineComponent} from "vue";

defineComponent({
  components: {'user-data': UserData}
})

</script>

<template>
  <user-data name="Ruyut" email="a@ruyut.com"></user-data>
</template>
    

上方範例程式碼是直接傳入字串，若要傳入變數內容則需要使用 v-bind 或是簡寫冒號(:)，下面示範 ref 和 reactive 的使用方式:

    
<script setup>
import UserData from "@/components/UserData.vue";
import {defineComponent, reactive, ref} from "vue";

const name = ref('Ruyut');
const userData = reactive({email: 'a@ruyut.com'});

defineComponent({
  components: {'user-data': UserData}
})

</script>

<template>
  <user-data v-bind:name="name" v-bind:email="userData.email"></user-data>
</template>
    

在元件中修改傳入參數

目前在 UserData.vue 這個元件中可以顯示 name 和 email 兩個參數，那要怎麼讀取呢？將剛剛的 defineProps 儲存起來，就可以抓到參數了，而在 Text Interpolation 這個模板語法(Template Syntax) 中則是兩個種方式都可以(第 2, 3 行)

    
<template>
  name: {{ props.name }}
  <br/>
  email: {{ props.email }}
</template>

<script setup>
import {defineProps} from "vue";

const props = defineProps({
  name: String,
  email: String,
})

console.log('name', props.name);
console.log('email', props.email);

</script>
    

設定元件中傳入參數為必要或是增加預設值

為了怕使用元件時忘記要傳入參數，可以設定 required: true ，這樣在未設定時就會拋出下面的 Warning

    
[Vue warn]: Missing required prop: "name" 
  at <UserData> 
  at <App>
    

或是使用 default 來設定預設值

    
<template>
  name: {{ props.name }}
  <br/>
  email: {{ props.email }}
</template>

<script setup>
import {defineProps} from "vue";

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    default: 'example@ruyut.com',
  },
})

</script>
    

可以將資料傳遞給子元件了，那子元件有沒有辦法將資料傳回給父元件? 繼續看下篇: Vue3 component 單檔案元件(SFC) 向上傳遞資料(傳遞參數、觸發事件)

參考資料：
vuejs.org - SFC Syntax Specification
vuejs.org - <script setup> defineProps
vuejs.org - Props
vuejs.org - Template Syntax