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