脚本宝典收集整理的这篇文章主要介绍了浅谈vue.js中的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 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

英文原文地址：https://dev.to/lydiahallie/javascript-Visualized-event-loop-3dif

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上就是浅谈vue.js中的Props（单向数据流）的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的浅谈vue.js中的Props（单向数据流）全部内容，希望文章能够帮你解决浅谈vue.js中的Props（单向数据流）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。