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 相关文章推荐
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
js获取和设置属性的方法
Feb 20 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
JS请求servlet功能示例
Jun 01 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
如何利用node转发请求详解
Sep 17 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
Django中Forms的使用代码解析
2018/02/10 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
Python中new方法的详解
2019/01/15 Python
python系列 文件操作的代码
2019/10/06 Python
Python笔记之工厂模式
2019/11/20 Python
python支持多继承吗
2020/06/19 Python
Python图像读写方法对比
2020/11/16 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
融资租赁计划书
2014/04/29 职场文书
房地产开发项目建议书
2014/05/16 职场文书
大学军训决心书
2015/02/05 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js