vue中修改props传进来的值

总所周知，vue是单向数据流，一般我们也不会在子组件里面修改父组件传进来的值，但总有需要修改的时候。

前段时间一个项目中有遇到上述情况，假设我直接传进来一个list，当时我直接在里面改了list，但是却惊讶的发现没有报错，以前好像有遇到直接修改抛出错误的，但这次却没有，当时也没有多想，最近空闲下来又想了下，发现自己确实**了(此处省略两字^_^)。原因如下：

因为我传进来的list是个数组，属于引用类型，修改子组件相当于把父组件也同时修改了，所以没有报错，如果是个基本类型的数据直接修改那么vue会报错。

在子组件修改props的方法：

1. 子组件data中拷贝一份，注意引用类型需要深拷贝，根据需求可以watch监听

data() {return {newList: this.list.slice()}
},
watch: {list(newVal) {this.newList = newVal}
}

2. 通过计算属性修改

computed: {nList() {return this.list.filter(item => {return item.isChecked})}
}

3. 通过研究大佬们的写法又发现了一种修改方式： sync修饰符

父组件穿进去的时候加上 .sync

子组件通过this.$emit('update:xxx', params)

// 父组件
<todo-list :list.sync="list" />// 子组件
methodName(index) {this.$emit('update:list', this.newList)
}

vue中修改props传进来的值相关推荐

【vue】修改props传进来的值
众所周知,vue是单向数据流,一般我们也不会在子组件里面修改父组件传进来的值,但总有需要修改的时候. 前段时间一个项目中有遇到上述情况,假设我直接传进来一个list, 当时我直接在里面改了list,但 ...
vue子组件修改props传进来的值、回调函数
vue修改props里面的值 1.传统方法,emit触发父组件修改父组件里面的值,间接的修改子组件的值父组件 <Child :msg="msg" @handle=" ...
vue修改props传过来的值报错Avoid mutating a prop directly since the value will be overwritten whenever the par
在做项目时有时候会遇到这种错误这句话的意思是说,避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖.相反,使用基于道具值的数据或计算属性. 就是不能直接改变父组件传过来的props,所以怎么办 ...
vue 跳添加编辑页面传两个值_vue两个组件间值的传递或修改方式
1.可以用公共的父组件来实现: 2.可以在store.js里面在设置公共变量: 3.也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改 ...
如何利用自定义的事件，在子组件中修改父组件里边的值？
如何利用自定义的事件,在子组件中修改父组件里边的值? 这是一篇好文章,佩服博主的思维:本文出自http://www.cnblogs.com/padding1015/ 关键点记住:三个事件名字步骤如下 ...
vue中的props对象
vue中的props对象 1.props对象的定义 props其实是properties的缩写,props对象是用来定义属性的.props对象可以接受数组形式的参数又或者是对象形式的参数. 数组形式 ...
vue中传值和传引用_vue prop属性传值与传引用示例
vue prop属性传值与传引用示例 vue组件在prop里根据type决定传值还是传引用. 简要如下: 传值:String.Number.Boolean 传引用:Array.Object 若想将数组 ...
vue项目下props传进去的数据,生命周期勾子函数包括watch不触发的解决办法
vue项目下props传进去的数据,生命周期勾子函数包括watch不触发的解决办法 @TOC 遇到的问题在深层props过程中,props的数据传到了目标文件但却没有触发数据更新及页面更新: wa ...
在vue中修改浏览器图标和名字
在vue中修改浏览器图标和名字 vue中,网页图标默认使用的是vue自带的一个icon的图标,也是vue的logo. 下面整理了几种改变标题和图标的方法 1.修改图标样式 01.使用图片这个方法是可 ...

vue中修改props传进来的值

vue中修改props传进来的值相关推荐

最新文章

热门文章