Vue中的Props(不可变状态)


Posted in Javascript onSeptember 29, 2018

组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项。在 Vue 中,父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。接下来通过本文给大家介绍Vue中Props,一起看看吧!

Vue中的Props(不可变状态)

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

问题

下面简要说一下上面发生的警告现象,或许大多数人都遇到过.

使用场景

父组件

<BackLogModal :isModalOpen="isModalOpen" @closeModal="handleCloseModal">
</BackLogModal>

  • BackLogModal为一个弹窗组件,通过isModalOpen决定弹窗的开闭状态
  • 传入的isModalOpen是父组件的一个变量,类型为boolean
  • closeModal监听子组件派发的自定义事件closeModal

子组件

// 使用了typescript
export default class BackLogModal extends Vue {
  @Prop()
  private isModalOpen: boolean;

  private handleConfirm(): void {
    this.$Message.info('Clicked ok');
    this.$emit('closeModal');
  }

  private handleClose(): void {
    this.$Message.info('Clicked cancal');
    this.$emit('closeModal');
  }
}
  • 通过@Prop()注解获取父组件传递过来的isModalOpen属性
  • 页面 通过v-model与属性isModalOpen进行绑定
  • 由于弹窗组件在关闭时会自动设置isModalOpen的值为false,这里直接修改的就是父组件传入的isModalOpen属性,由于props属性是单向数据流,具有不可变状态,这是页面就会抛出警告

解决问题

export default class BackLogModal extends Vue {
  private isOpen: boolean = false;

  @Prop()
  private isModalOpen: boolean;

  @Watch('isModalOpen')
  private watchModalOpen(newVal: boolean, oldVal: boolean) {
    console.log(newVal, oldVal);
    if (newVal !== oldVal) {
      this.isOpen = newVal;
    }
  }

  private handleConfirm(): void {
    this.$Message.info('Clicked ok');
    this.$emit('closeModal');
  }

  private handleClose(): void {
    this.$Message.info('Clicked cancal');
    this.$emit('closeModal');
  }
}
  • 定义一个子组件私有变量isOpen与页面弹窗就行绑定
  • 使用@Watch('isModalOpen')监听父组件传入的isModalOpen属性,一旦值发生改变,便更新本地变量isOpen,确保弹窗的正常的打开与关闭

以上所述是小编给大家介绍的Vue中的Props(不可变状态),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
node.js中 stream使用教程
Aug 28 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
vue动态删除从数据库倒入列表的某一条方法
Sep 29 #Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 #Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 #Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 #Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 #Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 #Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 #Javascript
You might like
php数字游戏 计算24算法
2012/06/10 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
详解ES6系列之私有变量的实现
2018/11/21 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python 数据加密代码
2008/12/24 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Django中使用Celery的方法示例
2018/11/29 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python中pass的作用与使用教程
2020/11/13 Python
营销与策划个人求职信
2013/09/22 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
2015年加油站工作总结
2015/05/13 职场文书