详解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 相关文章推荐
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
用vue 实现手机触屏滑动功能
May 28 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
杏林同学录(五)
2006/10/09 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
js 深拷贝函数
2008/12/04 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
python drf各类组件的用法和作用
2021/01/12 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
六查六看剖析材料
2014/02/15 职场文书
入团申请书格式
2019/06/20 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL