59Vue - Props(单向数据流)

简介: 59Vue - Props(单向数据流)

prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了,Vue 会在控制台给出警告。

通常有两种改变 prop 的情况:

  1. prop 作为初始值传入,子组件之后只是将它的初始值作为本地数据的初始值使用;
  2. prop 作为需要被转变的原始值传入。

更确切的说这两种情况是:

1.定义一个局部 data 属性,并将 prop 的初始值作为局部数据的初始值。

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

2.定义一个 computed 属性,此属性从 prop 的值计算得出。

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

目录
相关文章
|
关系型数据库 MySQL 测试技术
如何进行数据库的升级?
【7月更文挑战第21天】如何进行数据库的升级?
955 1
|
应用服务中间件 Linux nginx
Mac os 安装 nginx 教程(success)
这篇文章是关于如何在Mac OS系统上使用Homebrew安装nginx及其依赖,并解决安装过程中可能出现的权限问题。
1842 0
Mac os 安装 nginx 教程(success)
|
Java 编译器 C++
c++学习,和友元函数
本文讨论了C++中的友元函数、继承规则、运算符重载以及内存管理的重要性,并提到了指针在C++中的强大功能和使用时需要注意的问题。
163 1
|
Kubernetes 前端开发 调度
在K8S中,说下Pod亲和性的理解?
在K8S中,说下Pod亲和性的理解?
|
数据采集 人工智能 数据挖掘
盘点:5款简单好用的人事管理系统!
为大家介绍五款好用的人事管理系统,包括草料二维码人事管理系统,简道云等等。
|
存储 SQL 分布式计算
一文读懂云原生一体化数仓
阿里云云原生一体化数仓产品技术深度解读。
一文读懂云原生一体化数仓
|
JavaScript 前端开发 NoSQL
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站
352 0
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站
|
算法 C++ 索引
寻找最接近子数组和的算法设计及其C++实现
寻找最接近子数组和的算法设计及其C++实现
110 4
|
机器学习/深度学习 算法
删除重复元素(顺序表、单链表)
用顺序表和单链表分别实现删除操作
640 0
删除重复元素(顺序表、单链表)