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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
jquery 常用操作方法
Jan 28 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
vue axios整合使用全攻略
May 24 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
PHP 编程的 5个良好习惯
2009/02/20 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
浅谈vue项目打包优化策略
2018/09/29 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
详解python中requirements.txt的一切
2017/03/03 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
学院书画协会部门岗位职责
2013/12/01 职场文书
企划主管岗位职责
2013/12/12 职场文书
2014年教师节活动总结
2014/08/29 职场文书
2015年元旦标语大全
2014/12/09 职场文书
优秀班集体申报材料
2014/12/25 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python