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>