Vue3 ts 自定义组件 子传父

自定义组件

子组件触发，父组件接收

@xx=yy

自定义事件，子组件触发xx事件，父组件调用yy方法

1、触发(子组件)

a、核心

// [] 可以是多个事件
let emit = defineEmits(["send-age", ])
// 触发
emit("send-age", 666)

b、案例

<template> 
</template>

<script setup lang="ts" name="Student">
import { onMounted } from 'vue';
// [] 可以是多个事件
let emit = defineEmits(["send-age", ])
onMounted(()=>{
    setTimeout(() => {
        emit("send-age", 666)
    }, 3000);
})
</script>

<style>

</style>

2、接受(父组件)

a、核心

<!-- 自定义事件 -->
<Student @send-age="getAge"/>
function getAge(val:any){
    xxx
}

b、案例

<script setup lang="ts" name="App">
import { ref } from 'vue';
import Student from './components/Student.vue';
let num = ref(0)
function getAge(val:any){
    num.value = val
}
</script>

<template>
    <!-- 自定义事件 -->
  <Student @send-age="getAge"/>
  <hr>
  <h2>测试：{{ num }}</h2>  
</template>

<style scoped>

</style>