Vue+elementUI 从子组件返回父组件

Vue+elementUI 从子组件返回父组件

在前端开发中，我们经常会使用依托于主组件的子组件（可能只有我，因为我喜欢用抽屉来代替进入一个新页面），这样我们就会遇见一个问题：当我操作完子组件想返回父组件的时候，怎样关闭当前组件返回父组件呢？

比如图中这种情况，用户点击注册之后弹出左侧抽屉来供用户填写表单（可能主流方式是进入一个新的注册页面，但我更喜欢在当前页面用抽屉的形式实现（逃））

用户可能会有三种操作：1）点击立即创建按钮，进行相应处理之后然后根据后端返回值进行相应的成功操作（返回主页面）或者失败操作（比如提示网络断开创建失败）；2）点击取消，返回主页面；3）点击空白区域（本页面中抽屉之外的部分），或者esc，或者其他类似操作返回主页面。

在elementUI中，对于（3）操作已经默认实现了（只要你用的是它的抽屉组件），所以我们需要实现的是（1）和（2）操作。

首先我们知道，这个子组件有一个属性叫visible，当其为真时，这个组件便是可见的，就像上图中的状态；当其为假时，便为下图中的状态：

那我们便可以用一个变量registerFlag来表示当前抽屉是否可见，比如这样：

<el-drawer
      title="注册"
      :visible.sync="registerFlag"
      :direction="'ltr'"
      :before-close="handleClose">
      <register class="regis">
      </register>
    </el-drawer>

其中

:visible.sync="registerFlag"

这一句即可以实现通过修改registerFlag的值来控制子组件是否显示了（sync是同步修饰符，加上就完事了）。

但是我们就会遇到一个新问题：我在子组件里的时候是看不到父组件的呀，怎么操作这个在父组件里的变量呢！

我在第一次遇到这个问题的时候用我浅显的两三个小时的vue知识实现了通过传参来解决这个问题的方法。即通过props那一套，现在回头看十分愚蠢。

然后现在我又想到一种方法（说不定以后回来看也觉得很愚蠢）：

先在主页写好一个函数比如叫childrenCancle（），里面实现具体的关闭子组件的操作比如this.registerFlag=false，然后将这个函数名传递到子组件中，在子组件用$emit()方法调用这个函数：

<el-drawer

      title="注册"
      :visible.sync="registerFlag"
      :direction="'ltr'"
      :before-close="handleClose">
      <register class="regis"
​        @handleClose="childrenCancle">
          <!-- 这样就把父组件的childrenCancle函数传递到子组件中了，在子组件中使用时的名字叫handleClose，当然这里只是为了给大家区分清楚，在实际使用时可以叫一样的名字 -->
      </register>
    </el-drawer>

然后子组件中的关闭子组件的方法叫backHome()的话，在里面写一句this.$emit(“handleClose”)就可以了。

methods: {
    ...,
    backHome(){
      this.$emit("handleClose")
    }
    ...,
  },

Home(){
this.$emit(“handleClose”)
}
…,
},