资讯专栏INFORMATION COLUMN

vue 子组件修改props引用类型参数引发的思考

周国辉 / 1801人阅读

摘要:但是当传递的参数为对象或者数组的时候,是通过引用传入的,所以对于一个引用类型的来说,在子组件中改变这个参数本身将会影响到父组件的数据状态。

问题

父级组件与子组件的通信一般都是通过props来实现的,因为数据流向的单一才能保证数据变化的可追踪性,在vue中props遵循的是单向数据流,原则上子组件修改props是不被允许的。
但是当props传递的参数为对象或者数组的时候,是通过引用传入的,所以对于一个引用类型的prop来说,在子组件中改变这个参数本身将会影响到父组件的数据状态。更关键的是,我们打开控制台,会发现完全没有报错...
这就会导致父组件的data混乱,而且难以捕捉,所以对于这种情况可以这样处理。

解决方案

在子组件中声明新变量,然后把prop深拷贝赋值给新变量,之后子组件就使用新变量。
但是这种情况下父组件改变参数时,子组件无法更新参数,需要时可以通过watch或者computed来实现实时更新

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

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

相关文章

  • 详解vue组件三大核心概念

    摘要:前言本文主要介绍属性事件和插槽这三个基础概念使用方法及其容易被忽略的一些重要细节。至于如何改变,我们接下去详细介绍单向数据流这个概念出现在组件通信。比如上例中在子组件中修改父组件传递过来的数组从而改变父组件的状态。的一个核心思想是数据驱动。 前言 本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,也可以从这三个部分展开,它们...

    rickchen 评论0 收藏0
  • 封装Vue组件一些技巧

    摘要:根据组件单向数据流和和事件通信机制,需要由子组件通过事件通知父组件,并在父组件中修改原始的数据,完成状态的更新。 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式。以弹窗组件为例,一种实现是在需要模板中引入需要弹窗展示的组件,然后通过一个flag变量来控制弹窗的组件,在业务代码里面会充斥着冗余的弹...

    韩冰 评论0 收藏0
  • vue总结系列--组件

    摘要:触发事件可以携带数据,这些数据被用于传递给绑定了事件的其它组件的回调函数上,进而被传递给其它组件。父组件可以在回调函数里做任何事情,颇有灵活性。一般情况下,父组件会在回调函数中更新自己的状态数据。 上一篇博文梳理了vue的数据驱动和响应式相关的特性,这一篇博文就来梳理vue的一个很重要的特性,组件化。自定义组件之于vue,其意义不亚于函数之于C,java之类的编程语言。函数是计算机科学...

    cuieney 评论0 收藏0
  • vue项目props传值类型影响:单项数据流及双向数据流

    摘要:简单总结在使用传递数据的过程中,如果传递的是基本数据类型,则在子组件中不能修改父组件传递过来的值,此时符合的单向数据流方式如果传递的是引用型数据类型,则此时可以在子组件操作父组件传递过来的值,此时数据可以双向通信,违背单向数据流方式。 第一:传递string、number等基本数据类型:在构建vue项目中,props是子组件获取父组件的一种形式;在子组件中不可修改父组件传递的参数,代码...

    makeFoxPlay 评论0 收藏0
  • 理解vue组件(二)

    摘要:往往定义组件的构造器后,不需要手动的进行初始化,而是在其他组件的模板中当成标签来使用,这时候需要调用注册成组件。这样设计的目的是防止从子组件意外改变父级组件的状态,从而导致应用的数据流向难以理解。 上节说到组件https://segmentfault.com/a/1190000009236700,这一节继续来学习组件: 原文博客地址,欢迎学习交流:点击预览从github上获取本文代码:...

    Nino 评论0 收藏0

发表评论

0条评论

周国辉

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<