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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
PDO实现学生管理系统
2020/03/21 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
Python生成器(Generator)详解
2015/04/13 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Python批量发送post请求的实现代码
2018/05/05 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
Python 支付整合开发包的实现
2019/01/23 Python
python多进程读图提取特征存npy
2019/05/21 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Python定时器线程池原理详解
2020/02/26 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
学年自我鉴定范文
2013/10/01 职场文书
生日邀请函范文
2014/01/13 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
继续教育个人总结
2015/03/03 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
解决 redis 无法远程连接
2022/05/15 Redis