vue项目props传值类型影响：单项数据流及双向数据流

makeFoxPlay 发布于2019-08-26 10:24 / 1712人阅读

摘要：简单总结在使用传递数据的过程中，如果传递的是基本数据类型，则在子组件中不能修改父组件传递过来的值，此时符合的单向数据流方式如果传递的是引用型数据类型，则此时可以在子组件操作父组件传递过来的值，此时数据可以双向通信，违背单向数据流方式。

第一：传递string、number等基本数据类型：
在构建vue项目中，props是子组件获取父组件的一种形式；在子组件中不可修改父组件传递的参数，代码如下：
1、父组件代码：

2、子组件代码：

注释：
页面展示子组件修改后的值：
“这是子组件
这是父组件的值：888”；
在子组件中，尝试修改父组件传递过来的值，此时chrome控制台会报错:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop"s value. Prop being mutated: "fatherPassChild"；
同时，父组件中，打印的字段为修改之前的字段:
父传子。

第二：传递数组、对象等引用型数据类型：
如果通过props传递引用数据类型，在子组件中改修父组件的属性值，会出现什么情况？撸码如下：
1、父组件代码：

2、子组件代码：

注释：

此时，页面展示的内容是子组件修改后；同时，控制台并没有报错；why？

按照官网的解释：

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

简单总结：1、在使用props传递数据的过程中，如果传递的是基本数据类型，则在子组件中不能修改父组件传递过来的值，此时符合vue的单向数据流方式；

2、如果传递的是引用型数据类型，则此时可以在子组件操作父组件传递过来的值，此时数据可以双向通信，违背单向数据流方式。

个人理解：props传递参数不同，导致子组件是否能更改父组件props传递的值；跟const声明变量类似。

GPU云服务器云服务器工资项目属性数据类型云服务器搭建vue项目腾讯云服务器部署vue项目 vue项目放到云服务器上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106116.html

简单说说vue的父子组件，父子组件传值和vuex

摘要：我们需要在里改动一下代码首先就是绑定一个自定义事件再增加然后在中变成就是触发父组件中的方法所以，触发了父组件的函数，改变了父组件的的值，父组件再通过传值给子组件。从而实现数据传递，父子组件通信。一、vue的父子组件之间是如何传值的？首先呢，需要说说的是，vue既然有双向绑定，那为何会有父子组件之间的传值问题？这个问题也简单，vue的组件会供其他的vue页面进行调用，如果数组都是双...

Tecode 2019-08-22 18:31 评论0 收藏0
前端MVVM模式及其在Vue和React中的体现

摘要：在模式中一般把层算在层中，只有在理想的双向绑定模式下，才会完全的消失。层将通过特定的展示出来，并在控件上绑定视图交互事件，一般由框架自动生成在浏览器中。三大框架的异同三大框架都是数据驱动型的框架及是双向数据绑定是单向数据绑定。 MVVM相关概念 1） MVVM典型特点是有四个概念：Model、View、ViewModel、绑定器。MVVM可以是单向绑定也可以是双向绑定甚至是不绑...

沈建明 2019-08-23 12:36 评论0 收藏0
VUE前端工程化（一）（掌握组件的多种通信及数据同步）

摘要：是一个事件，它向下传播到当前实例的所有后代。由于后代扩展为多个子树，事件传播将会遵循许多不同的路径。组件修改实现递归地在父链上传播事件。组件通信父子组件通信父传子 props属性子传父 $emit事件这两种官方文档里有很详细的介绍就不解释了还是举个栗子： //parent.vue父组件 parent: {{money}} ...

Tony_Zby 2019-08-26 14:05 评论0 收藏0
Vue父子组件通信的三两事（prop、emit）

摘要：的单向数据传递直接作为一个本地变量下面是我的子组件这是父组件给我传的数据运行结果如下图子组件向父组件传递数据基本使用子组件向父组件传递数据，不能像上面一样实时的传递数据，必须通过事件触发。组件是Vue核心功能之一，合理的组件化，可以减少我们代码的冗余，提高项目的可维护性。下面，我将由浅入深的讲Vue的组件在讲之前，首先我们先了解一下组件的命名。 HTML是对特征名不敏感的语言，他...

darcrand 2019-08-23 14:56 评论0 收藏0
微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

sf190404 2019-08-29 16:09 评论0 收藏0