自定义事件实现子传父

父亲定义事件，子接收后触发事件

父：

<template>
  <div class="father">
    父：<br/>
    <!-- 父给子绑定一个事件，事件名叫xxoo，触发的函数是fuk，需要在父方定义函数fuk -->
    <Child @xxoo="fuk"/>
  </div>
</template>

<script setup lang="ts" name="Father">
 import Child from "./Child.vue";
 import { ref } from 'vue'
  
  function fuk(val){
    alert(val)
  }

</script>

<style scoped>
    .father{
        background-color:rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
    }
</style>

子：

<template>
  <div class="child">
   子：<br/>
   <button @click="emit('xxoo','daye')" >btn</button>
  </div>
</template>

<script setup lang="ts" name="Child">
  import { ref } from 'vue'
// 子接收父定义的事件名xxoo
const emit= defineEmits(['xxoo'])
// 子触发xxoo事件，后面接参数，也可以在按钮触发
emit('xxoo','nima')
</script>

<style scoped>
    .child{
        background-color: skyblue;
        padding: 10px;
        box-shadow: 0 0 10px black;
        border-radius: 10px;
    }
</style>