vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)


Posted in Javascript onFebruary 01, 2020

最近开始在用elementUI做一个后台管理系统项目,遇到一个问题,需求是这样,在父组件有一个按钮,点击按钮会显示弹窗(子组件),在子组件中用的是elementUI 的el-diolog弹窗组件,在关闭弹窗时(elementUI自带事件)便会报错。话不多说直接上代码。

DEMO

这是父组件的代码:

<template>
  <div>
     <app-refund :dialogVisible="refundVisible"></app-refund>
    // 下面是一个按钮,点击此按钮会触发refundFunc,并显示弹窗
     <el-dropdown-item @click.native="refundFunc">点击此按钮显示弹窗</el-dropdown-item>
  </div>
</template>
<script>
import refund from '@/pages/customer/refund'
export default {
  components: {
     "app-refund":refund
  },
  data(){
    return {
      refundVisible:false
    }
  },
   methods: {
   refundFunc:function(){
    this.refundVisible=true
    }
    }
}
</script>

以下是子组件的代码,为了使代码看起来更方便简洁,已经把其他冗余的代码删除,只留下能实现功能的必要代码

<template>
 <div>
 <el-dialog
   title="退余额"
  :visible.sync="dialogVisible"
  width="630px">
  </el-dialog>
 </div>
</template>
<script>
   export default { 
     props:{
     dialogVisible: {
      type:Boolean,
      default: false,
     }
    },
  }
</script>

以上便是父组件控制子组件的显示,而在子组件关闭弹窗的例子,这样肯定是不行的,因为在vue中props数据是单向流,不能在子组件改变父组件传过来的prop值,而解决方式就是用emit来更新prop值,解决方案如下。

父组件代码,js部分和上面一模一样,这里就不重复写了:

<template>
  <div>
     <app-refund :dialogVisible.sync="refundVisible"></app-refund>
    // 下面是一个按钮,点击此按钮会触发refundFunc,并显示弹窗
     <el-dropdown-item @click.native="refundFunc">点击此按钮显示弹窗</el-dropdown-item>
  </div>
</template>

子组件代码:

<template>
 <div>
 <el-dialog
   title="退余额"
  :visible.sync="dialogVisible"
  :before-close="hidePanel"
  width="630px">
  </el-dialog>
 </div>
</template>
<script>
   export default { 
     props:{
     dialogVisible: {
      type:Boolean,
      default: false,
     }
    },
      methods: { 
     // 利用sync进行数据双向绑定,子组件修改dialogVisible的值,并响应到父组件
     hidePanel() {
       this.$emit('update:dialogVisible', false)
     }
    },
  }
</script>

这里用到了elementUI的before-close方法,是弹窗关闭前的回调,用在这里的意思是在element自带的关闭弹窗方法之前调用hidePanel方法,由我们来控制弹窗的关闭,这样就能在关闭时更新dialogVisible的值,解决报错。

原理

很多时候我们需要在子组件中修改prop的值,这样就破坏了vue的单项数据流,利用vue2.3的sync可以实现数据的双向绑定,这是官方解释 https://cn.vuejs.org/v2/guide... ,使用方式也很简单。

总结

以上所述是小编给大家介绍的vue子组件改变父组件传递的prop值通过sync实现数据双向绑定,希望对大家有所帮助!

Javascript 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
Jquery Datatables的使用详解
Jan 30 #jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 #jQuery
js页面加载后执行的几种方式小结
Jan 30 #Javascript
javascript设计模式之装饰者模式
Jan 30 #Javascript
原生js+ajax分页组件
Jan 30 #Javascript
javascript设计模式之迭代器模式
Jan 30 #Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 #Javascript
You might like
4.与数据库的连接
2006/10/09 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php判断linux下程序问题实例
2015/07/09 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
python中定义结构体的方法
2013/03/04 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
庆八一活动方案
2014/01/25 职场文书
小学运动会口号
2014/06/07 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android