详解vue父子组件关于模态框状态的绑定方案


Posted in Javascript onJune 05, 2019

日常开发中经常遇到的一个场景,父组件有很多操作,需要弹窗,例如:

<template>
  <div class="page-xxx">
    //点击打开新增弹窗
    <button>新增</button>
    //点击打开编辑弹窗
    <button>编辑</button>
    //点击打开详情弹窗
    <button>详情</button>
    <Add :showAdd="false"></Add>
    <Edit :showEdit="false"></Edit>
    <Detail :showDetail="false"></Detail>
  </div>
</template>

子组件:

<div class="page-add">
  <el-dialog :visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClose(val) {
      this.dialogVisible= false
    },
  },
}
</script>

如何实现子组件和父组件模态框状态的同步

方案一:使用.sync 修饰符

父组件:

<template>
  <div class="page-xxx">
    //点击打开新增弹窗
    <button @click="show = true">新增</button>
    <Add :show.sync="show"></Add>
  </div>
</template>

子组件:

<div class="page-add">
  <el-dialog:visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {
  props: {
    show: {
      type: Boolean
    }
  },
  watch: {
    show(value) {
      this.dialogVisible= value
    }
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClose(val) {
      this.$emit('update:show', false);
    },
  },
}
</script>

方案二:使用v-model

父组件:

<template>
  <div class="page-xxx">
    //点击打开新增弹窗
    <button @click="show = true">新增</button>
    <Add v-model="show"></Add>
  </div>
</template>

子组件:

<div class="page-add">
  <el-dialog :visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {
  props: {
    show: {
      type: Boolean
    }
  },
  watch: {
    show(value) {
      this.dialogVisible= value
    }
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClose(val) {
      this.$emit('input', false)
    },
  },
}
</script>

computed OR watch ?

对于上面的两种方案,子组件内部还可以使用计算属性的写法

computed
export default {
  props: {
    show: {
      type: Boolean
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        return this.$emit('input', value)
      },
    },
  },
  methods: {
    handleClose(val) {},
  },
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript用select实现日期控件
Jul 17 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
js实现自动锁屏功能
Jun 02 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 #Javascript
优雅的处理vue项目异常实战记录
Jun 05 #Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 #Javascript
Node.js 路由的实现方法
Jun 05 #Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 #Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 #Javascript
jQuery操作cookie的示例代码
Jun 05 #jQuery
You might like
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
详解PHP中的Traits
2015/07/29 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
javascript 短路法代码精简
2009/08/20 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
python传递参数方式小结
2015/04/17 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
用python写PDF转换器的实现
2020/10/29 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
5.12护士节演讲稿
2014/04/30 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
实名检举信范文
2015/03/02 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
JAVA API 实用类 String详解
2021/10/05 Java/Android
mysql函数全面总结
2021/11/11 MySQL