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 相关文章推荐
jQuery的学习步骤
Feb 23 Javascript
jquery等待效果示例
May 01 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
Javascript动画效果(1)
Oct 11 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 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
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
javascript常用功能汇总
2015/07/05 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
js倒计时显示实例
2016/12/11 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
2014植树节活动总结
2014/03/11 职场文书
法律顾问服务方案
2014/05/15 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
经理岗位职责
2015/02/02 职场文书
基层党建工作简报
2015/07/21 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
MySQL常用慢查询分析工具详解
2022/08/14 MySQL