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 相关文章推荐
获取表单控件原始(初始)值的方法
Aug 21 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
Element Dialog对话框的使用示例
Jul 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/06/09 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
JS中的多态实例详解
2017/10/15 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Python编码类型转换方法详解
2016/07/01 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
Python中包的用法及安装
2020/02/11 Python
对python中各个response的使用说明
2020/03/28 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
荟萃全球保健品:维他购
2018/05/09 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
口腔医学技术应届生求职信
2013/11/09 职场文书
师德师风个人反思
2014/04/28 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书