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

深入理解 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. computedmodalVisibleget 因为 this.visibletrue 变为 false ,重新计算出 modalVisiblefalse,达到关闭弹框的效果

三、参考资料

Vue中 model 选项
Vue中 computed 选项

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值