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 相关文章推荐
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
Vue实现简单的留言板
Oct 23 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
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采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
实例讲解php实现多线程
2019/01/27 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
菊花转动的jquery加载动画效果
2018/08/19 jQuery
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python有证书的加密解密实现方法
2014/11/19 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
史学专业毕业生求职信
2014/05/09 职场文书
年终奖发放方案
2014/06/02 职场文书
村级四风对照检查材料
2014/08/24 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
商标侵权律师函
2015/05/27 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书