Vue: 打开弹框的正确姿势

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_33594380/article/details/79670400

1. 技术选型

Vue + ElementUI

2. 需求功能分析

点击按钮,出现弹框。点击取消或者弹框右上角叉号,关闭弹框。

3. 组件树结构

4. 实现思路 

4.1 方案一 (wrong)

  • 用户点击MainContent触发点击事件
  • MainContent通知父组件显示弹框
this.$emit('showAlertModal')
  • 父组件接收通知并改变showAlertModal变量的值
this.showAlertModal = true
  • 父组件传值给AlertModal告诉它:请开始你的表演
<AlertModal :show="showAlertModal"></AlertModal>
  • 子组件拿到这个值之后,脱掉隐身衣
<el-dialog title="title" :visible.sync="show"></el-dialog>
  • 当用户点击到取消按钮或者弹出框右上角的叉号时,子组件更改show的值隐藏自己
CloseThis () {
    this.show = false
}

这个方案是可以正常运行的,但是会报错,因为Vue不允许子组件更改父组件的变量。

4.2 方案二 (wrong)

  • 子组件中不直接更改父组件传过来的show值,而是在computed中使用一个变量来接收它
computed: {
  showThis: {
    get: function () {
      return this.show
    }
  }
}
  • 子组件通过showThis变量来操作隐身衣
<el-dialog title="title" :visible.sync="showThis"></el-dialog>
  • 在用户点击取消按钮的时候通过改变showThis的值来达到隐藏效果
CloseThis () {
    this.showThis = false
}

结果表现为弹出框能点开,但是关不上,报错信息为:Computed property "showThis" was assigned to but it has no setter.

好吧,查了一下官方文档发现需要如果需要读取和设置computed中的属性需要同时具备get和set方法,就像下面这样

但是继续观察这个写法,发现set方法中修改的变量值正是get方法中返回的变量值。平移到我们这个场景中则表现为set方法中需要修改this.show的值,而this.show是父元素传下来的,是不能修改的,所以这个方法也不可行!

4.3 方案三 (right)

  • 子组件在data中定义一个showThis变量,初始值为null
data () {
  return {
    showThis: null
  }
}
  • 在组件挂载的时候将父元素传来的show赋值给showThis 
mounted () {
    this.showThis = this.show
}
  • 为show和showThis两个变量添加监听,每当它们发生变化的时候就进行相应的操作
watch: {
  showThis: function(newV, oldV){
    // 告诉父元素改变show的值
    this.$emit('closeModal', newV)
  },
  show: function (newV, oldV) {
    this.showThis = newV
  }
}
  • 父元素拿到子元素传来的closeModal事件的dom及事件触发的函数内容如下
<AlertModal 
    @closeModal="CloseModal"
    :show="showAlertModal"></AlertModal>
CloseModal(...data) {
  this.showAlertModal = data[0]
}

 

展开阅读全文

没有更多推荐了,返回首页