defineProps、defineEmits

Share This Post

要啟用該語法,需要在 <script> 代碼塊上添加setupattribute:

<script setup>
console.log('hello script setup')
</script>

defineProps和 defineEmits 都是只能在 <script setup> 中使用的編譯器宏。他們不需要導入,且會隨著 <script setup> 的處理過程一同被編譯掉。

defineProps

defineProps接收與props 選項相同的值,在父元件處使用子元件元件時,在元件加上傳遞至子元件的值或變數。

//父元件
<template>
 <HelloWorld msg="Vite + Vue" />   //傳遞值
 <HelloWorld :msg="msg" />   //傳遞變數
</template>


//子元件
<script setup lang="ts">
const props = defineProps({
  msg: String,
});
</script>

defineEmits

defineEmits接收與emits 選項相同的值,在子元件設定defineEmits,向父元件進行事件傳遞。

<template>
    <HelloWorld @msg="check()" />
</template>

//子元件
<script setup lang="ts">
const emit = defineEmits(['change', 'delete'])
</script>

範例

參考

Vite 官方文件
Vue.js

訂閱研究文章

Get updates and learn from the best

More To Explore

Scroll to Top

hurry up !

軟體工程師培訓

限時免費報名中

藉由與「真實世界軟體專案」相同的技術、工具與開發流程,化簡成與商業機密無關、門檻較低更容易上手的「模擬專案」,讓你有機會在職場前輩的陪伴下,完成真槍實彈的練習,動手解決真實的問題,快速累積個人的經驗與作品,而不只是「學習技術」而已。