6、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>