在Vue 3的项目开发中，父子组件之间的通信是最基础也最常用的操作场景，其中通过自定义事件控制子组件的显示与隐藏是很多业务都会用到的功能。理解自定义事件的触发、传递和监听逻辑，能够帮助我们更灵活地实现组件间的状态联动。
自定义事件控制子组件显示隐藏的核心逻辑
要实现通过自定义事件控制子组件的显示与隐藏，核心思路是：子组件内部的状态变化通过自定义事件传递给父组件，父组件接收事件后修改对应的状态，再通过props将状态传递给子组件，子组件根据props的值决定是否显示自身。
1. 父组件的基础结构
父组件需要维护一个控制子组件显示的状态，同时渲染子组件时将这个状态通过props传递给子组件，并且监听子组件触发的自定义事件。
<template>
<div class="parent-container">
<h2>父组件</h2>
<button @click="showChild = true">显示子组件</button>
<!-- 传递show状态给子组件，监听子组件的hide-child事件 -->
<ChildComponent
:is-show="showChild"
@hide-child="handleHideChild"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
// 控制子组件显示的状态
const showChild = ref(false)
// 处理子组件触发的隐藏事件
const handleHideChild = () => {
showChild.value = false
}
</script>
<style scoped>
.parent-container {
padding: 20px;
border: 1px solid #ccc;
}
</style>
2. 子组件的实现逻辑
子组件需要接收父组件传递的is-show属性，根据这个属性决定是否渲染自身内容，同时在需要隐藏的时候触发自定义事件通知父组件。
<template>
<div class="child-container" v-if="isShow">
<h3>子组件</h3>
<p>这是子组件的内容</p>
<button @click="handleClose">关闭子组件</button>
</div>
</template>
<script setup>
// 定义接收的props
const props = defineProps({
isShow: {
type: Boolean,
default: false
}
})
// 定义触发的自定义事件
const emit = defineEmits(['hide-child'])
// 点击关闭按钮时触发自定义事件
const handleClose = () => {
emit('hide-child')
}
</script>
<style scoped>
.child-container {
margin-top: 20px;
padding: 20px;
border: 1px solid #409eff;
background-color: #f0f8ff;
}
</style>
关键知识点说明
- defineProps：Vue 3的<script setup>语法中用于定义组件接收的props的编译器宏，不需要额外导入即可使用。
- defineEmits：用于定义组件可以触发的自定义事件，同样不需要额外导入，调用后会返回一个emit函数用于触发事件。
- v-if指令：这里使用
v-if控制子组件内容的渲染，当isShow为false时，子组件的内容不会挂载到DOM中，符合显示隐藏的需求。
常见注意事项
如果直接在子组件内部修改isShow的值，会触发Vue的警告，因为props是单向绑定的，子组件不应该直接修改父组件传递的props。正确的做法就是通过自定义事件将修改状态的请求传递给父组件，由父组件完成状态更新。
另外，如果子组件的显示隐藏需要过渡动画，可以结合<Transition>组件使用，只需要在子组件的外层包裹<Transition>标签，并添加对应的过渡样式即可，自定义事件的触发逻辑不需要修改。
<template>
<div class="parent-container">
<h2>父组件</h2>
<button @click="showChild = true">显示子组件</button>
<Transition name="fade">
<ChildComponent
:is-show="showChild"
@hide-child="handleHideChild"
/>
</Transition>
</div>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>