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 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
封装微信小程序http拦截器过程解析
Aug 13 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
图形数字验证代码
2006/10/09 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
CI框架表单验证实例详解
2016/11/21 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
用 JSON 处理缓存
2007/04/27 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
用Python实现KNN分类算法
2017/12/22 Python
Django中create和save方法的不同
2019/08/13 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
播音主持专业个人自我评价
2014/01/09 职场文书
实验教师岗位职责
2014/02/13 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技