vue3基础夯实【1组件】携手创作，共同成长！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

携手创作，共同成长！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

组件-子传父

这个是子组件（使用了ts语法）

 <div>
   这个是子组件=>{{num }}
   <button @click='changeNum'>按钮</button>
 </div>
</template>

<script setup lang='ts'>
let num= ref(200);
const emit = defineEmits<{
 (e:'fn',id:number):void
}>()
const changeNum = ()=>{
 emit('fn' ,num)
} 

</script>

这个是父组件

<template>
  <div class="home">
    <List @fn='changeHome'></List>
  </div>
</template>

<script setup>
import List from '../components/List.vue'
const changeHome = (n)=>{
  console.log(n.value);
}
</script>