Vue子父组件通信实践–弹窗与关闭

作者: Lynan 分类: Vue.js 发布时间: 2018-04-13 17:57

场景


现在我有一个新闻列表页面,列表上方是一个导航栏NavBar,Bar的右侧放一个搜索按钮,点击的时候弹出搜索面板,搜索面板弹出以后,点击面板中的取消关闭弹窗。

传统实现方式:

为这个弹窗绑定一个v-if属性,例如v-if=”showSearch” 当showSearch为true时,这个弹窗将会显示,反之它不会被渲染出来(v-if特性)。
那么这个弹窗面板的内容和操作逻辑都要和新闻列表页面写在一起。
在NavBar为这个搜索按钮绑定

@click="showSearch = true"

那么点击这个搜索按钮的时候弹窗响应showSearch的变化就会显示了,然后为弹窗里的取消按钮绑定

@click="showSearch = false"

点击“取消”按钮之后,弹窗消失。

分析

从图上可以看到,本身我们的这个新闻列表页面已经包含很多组件,导航栏,标签栏,列表,这里面已经需要很多操作方法,并且我的搜索结果也是显示在弹窗中的,如果把这些内容全部写在同一个页面之中会显得页面非常臃肿难以维护,而通过组件化的形式,将使得我们的页面架构清晰明了,会有一种看起来比较爽的感觉,无论是自己维护或者是别人接受了你的代码,都不会有一种奇怪的感觉。

我的实现:

为这个搜索弹窗使用单独的组件,那么如果要关闭弹窗,必须操作这个列表页面(父级页面)的data了。
Vue为我们进行父子(props)、子父($emit)提供了方法

具体操作过程

  1. 父级页面引入这个弹窗组件并且注册
  2. 弹窗组件中为“取消按钮”绑定一个事件,例如
    @click="closeSearch"

    然后在methods:中定义这个方法

    closeSearch() {
          this.$emit("close")
        },
  3. 父级页面(组件)中接受这个emit,例如

    然后在methods:中定义这个方法

    closeSearch() {
          this.openSearch = false
        }
  4. 完成了

发表评论

电子邮件地址不会被公开。 必填项已用*标注