首页vue3子组件传递参数控制父组件的显隐

vue3子组件传递参数控制父组件的显隐

时间: 2025-01-08 21:07:38 浏览: 69

### Vue3 中子组件向父组件传递参数以控制其显隐在 Vue3 的组合式 API 下，`defineEmits` 是一种声明方式，允许子组件触发自定义事件并通知父组件。这可以通过 `setup` 语法糖简化实现。 #### 父组件逻辑处理父组件负责管理自身的状态以及响应来自子组件的通知。为了达到这一目的，在脚本部分引入必要的依赖项，并创建一个布尔类型的变量用于追踪底部导航栏的可见性： ```javascript <script setup> import ChildButton from './ChildButton.vue' import { ref } from 'vue' const isBottomNavVisible = ref(false) function toggleBottomNavigation() { isBottomNavVisible.value = !isBottomNavVisible.value; } </script> <template> <div>  <footer v-if="isBottomNavVisible"> 底部导航内容... </footer>  <ChildButton @click="toggleBottomNavigation"/> </div> </template> ``` #### 子组件发送消息给父组件子组件内通过 `$emit()` 方法发出名为 "click" 的事件信号至父级容器，从而激活相应的回调函数执行切换操作: ```html  <script setup> // 定义 emit 函数列表, 这里只有一个叫做 'click' 的事件 const emit = defineEmits(['click']) function handleClick(){ // 当按钮被点击时发射 click 事件 emit('click') } </script> <template> <button @click="handleClick">Toggle Bottom Nav</button> </template> ``` 上述代码展示了如何利用 `defineEmits` 和 `$emit` 实现子组件与父组件之间的通信机制[^1]。当用户交互发生于子组件内的时候（比如按下按钮），会触发展开/收起动作，进而改变父组件中相应区域的渲染情况。

阅读全文