Vue中子组件的显示与隐藏方式_vue.js_

子组件的显示与隐藏

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

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

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

完整的代码在2.1与2.2中。

第一步 使用v-show

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

父组件中有显示/隐藏按钮，点击后显示/隐藏子组件，效果如下：

1.1 父组件

Vue中的v-show指令会通过切换CSS中display属性的值，使对应元素显示/隐藏。

简化了click方法，将显示/隐藏按钮的点击事件写到了一起。

1.2 子组件

目前子组件中仅仅只是做界面的显示。

2 第二步 父子组件传参

在第一步中，我们通过在父组件中修改dialog_visible的值，来控制子组件的显示/隐藏，非常简单。

而下一步，我们还需要实现在子组件中隐藏（关闭）自己。

原理上很简单，其实就是在子组件中，修改父组件中的dialog_visible参数嘛。

最终的效果如下：

2.1 父组件

父组件的变化并不大，主要有两个地方：

• 向子组件传参，即将dialog_visible传递给子组件
• 设置自定义事件与其处理方法

2.2 子组件

子组件中增加了一个按钮，用于隐藏自身，通过触发父组件事件来修改父组件中dialog_visible的值。

用一张图来表示父、子组件间数据双向绑定的数据流向是：

如此便完成了Vue子组件的显示与隐藏。

（最后吐槽一句，CSDN这markdown编辑器的代码块高亮都还不支持vue的语法，勉强用html语法的高亮代替…）

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！