vue3 ＜script setup＞父子組件傳值

• 子組件

<!--vue3的父子組件傳值(emits.vue)-->
<script setup>
import { ref } from 'vue'
    
defineEmits(['byVal']); // 使用defineEmits和defineProps不需要導入
defineProps({
  msg: String
})
</script>
 
<template>
  <div class="container">
    <div class="btn" @click="$emit('byVal', 1)">點擊給父組件傳值</div>
    <div>{{msg}}</div>
  </div>
</template>

• 父組件

<script setup>
import {} from 'vue';
import myEmits from './emits.vue'; // 導入子組件
 
const byVal = (val) => {
  console.log(val);// 輸出子組件的值
}
</script>
 
<template>
    <myEmits mes="abcd" @byVal="byVal" />
</template>