直接上代码
子组件
<template> <div @click="fun"> 子传父 </div> </template> <script setup> import {reactive} from 'vue'; const table = reactive({ msg:'我是子组件' }) let emits = defineEmits(["clicks"]); //使用defineEmits来创建emit const fun = ()=>{ emits("clicks",table.msg); //第一个为刚才定义的事件名,第二个是要传给父组件的值 } </script>
父组件
<template> <test @clicks="ces" />//在页面上以单标签的方式使用 //这个事件要用刚才在子组件中自定义的事件,例如:clicks </template> <script setup> import test from '../../components/Test/index.vue'; //引入子组件的路径 const ces = (v)=>{ console.log(v); } //这个时候打印即可获取到子组件的值 </script>