详解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代码
Dec 01 Javascript
用jscript实现新建word文档
Jun 15 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
实例讲解JavaScript 计时事件
Jul 04 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数字转汉字代码(算法)
2011/10/08 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
javascript 写类方式之二
2009/07/05 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
浅谈Python的垃圾回收机制
2016/12/17 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
如何用python写个模板引擎
2021/01/14 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
ORACLE十问
2015/04/20 面试题
自荐书封面下载
2013/11/29 职场文书
自我评价如何写好?
2014/01/05 职场文书
秋天的雨教学反思
2014/04/27 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
javascript函数式编程基础
2021/09/15 Javascript