【vue】深入理解 vue model 属性：用于弹框

一、文章综述

作用

帮助理解 model 用法，额外提到 computed 的 set 方法；弹框写法。

背景

阅读同事的代码，发现弹框写法跟我不一样，接触到了 model 属性，在朋友的讲解下，理解了 model 和 computed 的用法。

二、主要内容

<template>
  <a-modal
    v-model="modalVisible"
    title="Test"
    okText="Confirm"
    @ok="modalVisible = false"
    destroyOnClose
  >
  	<span>{{sum}}</span>
  </a-modal>
</template>
<script>

export default {
  props: {
    visible: Boolean,
    add1: Number,
    add2: Number
  },
  model: {
    prop: 'visible',
    event: 'update:visible'
  },
  computed: {
    modalVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    fileList () {
      return 
    }
  }
}
</script>

关闭弹框逻辑：

1. 点击关闭按键，触发 modalVisible = false；
2. computed 中的 modalVisible 原来的 true 变为 false 触发 set 属性；
   注意： 此处只是触发，没有改变 modalVisible ,要是在 set 中打印 modalVisible ，结果还是 false)
3. 运行 this.$emit('update:visible', val)，向父组件冒泡 update:visible 事件
4. 父组件触发 model 中的 event 事件，即 update:visible 事件，并把子组件传过来的 val 赋值给 visible，再重新传回子组件
5. 子组件的 props 更新，visible 变为 false
6. computed 的 modalVisible 的 get 因为 this.visible 由 true 变为 false ，重新计算出 modalVisible 为 false，达到关闭弹框的效果

三、参考资料

Vue中 model 选项
Vue中 computed 选项

感谢我的同事 frank 耐心指导！
此文章如有不足之处，希望大家在评论区一起交流哦！谢谢大家！！！