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

Commitizen

前言: 現今軟體功能複雜與龐大,在開發過程中,不管單人開發還是多人協作,對所編寫的代碼與代碼版本管控都是必須的

NFC x Mifare

實作紀錄 readMifare readNdef 知識補充 手機NFC隱含攻擊弱點 掌握原理避免無線盜刷 MI

Scroll to Top