Vue子组件如何实现灵活的显示与隐藏控制？

本文共计1345个文字，预计阅读时间需要6分钟。

目录+组件的显示与隐藏+第一步+使用v-show+1.1+父组件+1.2+子组件+2+第二步+父子组件传参+2.1+父组件+2.2+子组件+子组件的显示与隐藏+在开发Vue前端页面时，经常会遇到需要+

目录

• 子组件的显示与隐藏
• 第一步 使用v-show
• 1.1 父组件
• 1.2 子组件
• 2 第二步 父子组件传参
• 2.1 父组件
• 2.2 子组件

子组件的显示与隐藏

在使用Vue开发前端页面的过程中，经常都会遇到需要在父组件中控制子组件的显示/隐藏，比如弹出窗口。最简单的方法就是：通过父子组件间的数据双向绑定来实现。这种方法虽然简单，但只是针对于父与子组件这种关系来实现的。如果是子组件与子组件之间，可以考虑使用Vuex来完成。

另外我自己也是一个前端小白，为了更方便大家理解，我将代码拆分成了两个步骤：

• 第一步是实现父对子的显示/隐藏的控制（v-show）
• 第二步是实现子组件对自己的隐藏（父子组件参数传递）

完整的代码在2.1与2.2中。

第一步 使用v-show

这一步首先实现在父组件通过v-show对子组件的显示/隐藏进行控制。