13、Vue3 context.emit

vue3 setup中子组件抛出事件通过context.emit

案例

• index.vue 父页面

<template>
    <div>
        <child1 :name="name" title="标题一" @itemclick="itemclickFun"/>
    </div>
</template>
<script>
import { ref } from  vue 
// 导入子组件
import child1  from  ../../components/child1 
export default {
    name:  index4 ,
    components: {
        child1
    },
    setup(){
        const name = ref( 传入子组件的name );
        // 监听子组件抛出的事件
        const itemclickFun = (e)=>{
            console.log( 子组件给的值： , e);
        }
        return { name, itemclickFun }
    }
}
</script>

• child1.vue 子组件

<template>
    <div @click="clickInfo">
        子组件 == {{name1}}, {{title1}}
    </div>
</template>
<script>
import { reactive } from  vue 
export default {
    name:  child1 ,
    props: {
        name: String,
        title: String
    },
    setup(props, context){
        
        const name1 = reactive(props.name)
        const title1 = reactive(props.title)
        // 子组件点击事件
        const clickInfo = ()=>{
            // 抛出事件
            context.emit( itemclick , {name:  emitClick })
        }
        return { name1, title1, clickInfo };
    }
}
</script>