初入vue:子组件接收props值并需要对这个值进行修改的解决办法_vue将props传过来的参数重新定义变量接收-程序员宅基地

技术标签: vue  

vue:子组件接收props值并需要对这个值进行修改的解决办法

最进刚刚从微信小程序转过来,发现了vue与其有很大的相似之处,相比之下vue确实是方便了很多(特别是vue的#双向绑定),对于组件的话vue方面限制了子组件对父组件穿来的值的修改.开始的时候,如果子组件直接将父组件传过来的props进行修改操作,会报一个警告

[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: "depByOrgList"

这时候需要在子组件data()重新定义一个值去接收报错的这个depByOrgList,下面是我项目中的代码
props: {
    tempUserid:{
      type:String
    },
    depByOrgList:{
      type:Array,
    }
  },
  data() {
    return {
      dialogDepEdit: false,
      innerDepVisible: false,
      innerDepDeitVisible: false,
      thedepByOrgList: this.depByOrgList,
      depForm:{}
    }
  },
使用一个变量thedepByOrgList去接收,子组件就可以满足对父组件传过来的值进行操作了.

但是这样还是会存在一个问题,thedepByOrgList这个属性只会在组件被创建的时候赋一次值,后续如果depByOrgList这个props值有变化,thedepByOrgList并不会自动同步,这时候就需要引入vue的一个属性监听函数

watch:{
    depByOrgList:function(val){
      this.thedepByOrgList=val
    }
  },

watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40623646/article/details/96327227

智能推荐

每天一点面试题(8) ------------diff算法详解_安卓面试题 diff算法有哪些-程序员宅基地

文章浏览阅读3.1k次,点赞3次,收藏15次。diff算法的作用计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面。传统diff算法通过循环递归对节点进行依次对比,算法复杂度达到 O(n^3) ,n是树的节点数,这个有多可怕呢?——如果要展示1000个节点,得执行上亿次比较。。即便是CPU快能执行30亿条命令,也很难在一秒内计算出差异。React的diff算法(1)什么是调和?将..._安卓面试题 diff算法有哪些

vagrant up default: Warning: Connection timeout. Retrying_cmd中vagrant up超时-程序员宅基地

文章浏览阅读2.6k次。在ubutun14 系统中安装vagrant执行vagrant up时会出现:==> default: Booting VM... ==> default: Waiting for machine to boot. This may take a few minutes... default: SSH address: 127.0.0.1:2222 de_cmd中vagrant up超时

Python实现图(Graph)及其算法(BFS)_python 图算法-程序员宅基地

文章浏览阅读1w次,点赞8次,收藏40次。注:参考书籍《Python数据结构与算法》1.图的抽象数据类型定义Graph()新建一个空图;addVertex(vert)向图中添加一个顶点(vert)实例;addEdge(fromVert,toVert)向图中添加一条有向边,用于连接顶点fromVert,toVertaddEdge(fromVert,toVert,weight)向图中添加一条带权重(weight)的有向边getVertex(vertKey)在图中找到名为vertKey的顶点getVertices()以列表形_python 图算法

销售管理系统 JavaGUI Swing框架实现版-程序员宅基地

文章浏览阅读1.1w次,点赞5次,收藏80次。销售管理系统 JavaGUI Swing框架实现版_销售管理系统

SICP 2.59 集合的合并union_set_set thinker-程序员宅基地

文章浏览阅读372次。现在有两个集合set1 和 set2, 需要将这两个集合合并成一个集合。 思路很简单: 顺序查找set1中的元素set2是否包含,是,则找下一个,否,加入到set2。 最后返回set2scheme 实现:(define (union_set set1 set2) (if (null? set1) set2 (union_set (cdr set1) (a_set thinker

Android 利用属性动画结合贝塞尔曲线方程编写好看的动画._android 贝塞尔曲线融合动画-程序员宅基地

文章浏览阅读5k次。研究一下贝塞尔曲线./** * 贝塞尔方程 */ private class BeizerEvaluator implements TypeEvaluator { private PointF point1; private PointF point2; private PointF pointF;_android 贝塞尔曲线融合动画

随便推点

AXI总线详解-不同类型的DMA_dma cdma-程序员宅基地

文章浏览阅读1k次。不同类型的DMAGPIOPL general purpose AXIGP AXI utlilizing PS DMACHigh performance w/DMAACP w/DMA几种DMA的总结​ZYNQ中不同应用类型的DMA  几个常用的 AXI 接口 IP 的功能(上面已经提到):  AXI-DMA:实现从 PS 内存到 PL 高速传输高速通道 AXI-HP<---->AXI-Stream 的转换  AXI-FIFO-MM2S:实现从 PS 内存到._dma cdma

Java生成二维码分享海报_java生成小程序二维码海报-程序员宅基地

文章浏览阅读938次。声明:本文转载自http://www.chinacion.cn/article/7931.html,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。这一篇文章我们就用 Java 来生成一下仿金山词霸的海报。As long as you can still grab a breath, you fight. 只要一息尚存,就不得不战。有那么一段时..._java生成小程序二维码海报

人工神经元网络基本构成,人工神经网络主要有_人工神经元的结构以及各部分功能-程序员宅基地

文章浏览阅读870次。人工神经网络(ArtificialNeuralNetwork,即ANN)是从信息处理角度对人脑神经元网络进行抽象,是20世纪80年代以来人工智能领域兴起的研究热点,其本质是一种运算模型,由大量的节点(或称神经元)之间相互联接构成,在模式识别、智能机器人、自动控制、生物、医学、经济等领域已成功地解决了许多现代计算机难以解决的实际问题,表现出了良好的智能特性。_人工神经元的结构以及各部分功能

HTML5+CSS3实现的小风车-转动的童年_h5 css写风车转动-程序员宅基地

文章浏览阅读2.3k次。#windmill{ width:160px; height:160px; position:relative; -moz-transition:-moz-transform 2s ease-in-out; -webkit-transition:-webkit-transform 2s ease-in-out; -moz-transform:rotate(0deg); -webki_h5 css写风车转动

如何判断windows动态链接库是32还是64位_win32动态链接库有64位版本吗-程序员宅基地

文章浏览阅读3.9k次。如何判断windows动态链接库是32还是64位从 http://www.cnblogs.com/conorpai/p/6393120.html 转载而来如果安装过Visual Studio的话,直接打开一个VS提供的控制台窗口,比如VS2012 x64 Native Tools Command Prompt.用下面的命令查看程序的头部信息:“dumpbin /_win32动态链接库有64位版本吗

华为android贡献度,从EMUI的6次里程碑事件,看华为对安卓生态的贡献-程序员宅基地

文章浏览阅读2k次。原标题:从EMUI的6次里程碑事件,看华为对安卓生态的贡献从华为进入手机领域开始至今,EMUI的发展共经历了5次较大的里程碑事件。由于安卓的开源属性,因此,每一次关键问题的解决和核心难题的攻克都是对安卓生态发展的一次贡献。 EMUI5.0:天生一,一生快用安卓的机友都深有体会,安卓系统最大的顽疾就是用几个月,系统就会变得异常卡顿。针对该问题,华为手机在EMUI5.0的时候,推出了“天生一,一生快”..._华为对安卓的贡献

推荐文章

热门文章

相关标签