vue3 setup中子组件抛出事件通过context.emit
index.vue 父页面
<template><div><child:name="name"title="标题一"@itemclick="itemclickFun"/></div></template><script>import{ ref}from'vue'// 导入子组件import childfrom'../../components/child'exportdefault{
name:'index',
components:{
child},setup(){const name=ref('传入子组件的name');// 监听子组件抛出的事件constitemclickFun=(e)=>{
console.log('子组件给的值：', e);}return{ name, itemclickFun}}}</script>child.vue 子组件
<template><div@click="clickInfo">
子组件 == {{name1}}, {{title1}}</div></template><script>import{ reactive}from'vue'exportdefault{
name:'child',
props:{
name: String,
title: String},setup(props, context){const name=reactive(props.name)const title=reactive(props.title)// 子组件点击事件constclickInfo=()=>{// 抛出事件
context.emit('itemclick',{name:'emitClick'})}return{ name, title, clickInfo};}}</script>