详解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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
JS匿名函数实例分析
Nov 26 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
php中session退出登陆问题
2014/02/27 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
$()JS小技巧
2007/07/21 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python上传package到Pypi(代码简单)
2016/02/06 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python format 格式化输出方法
2018/07/16 Python
python http基本验证方法
2018/12/26 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
物流管理专业求职信
2014/05/29 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang