vue中如何修改props传进来的值

更新时间：2022年12月07日 10:24:27 作者：厨樱

大家应该都知道vue是单向数据流，一般我们也不会在子组件里面修改父组件传进来的值，但总有需要修改的时候，这篇文章主要介绍了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.js watch监视属性知识点总结
在本篇文章里小编给大家分享的是关于Vue.js watch监视属性的相关知识点内容，需要的朋友们学习下。
2019-11-11
vue中使用Cesium加载shp文件、wms服务、WMTS服务问题
这篇文章主要介绍了vue中使用Cesium加载shp文件、wms服务、WMTS服务问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
详解Vue前端生产环境发布配置实战篇
这篇文章主要介绍了详解Vue前端生产环境发布配置实战篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
Vue项目部署后提示刷新版本的实现代码
这篇文章主要给大家介绍了关于Vue项目部署后提示刷新版本的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2022-06-06
JSON数组和JSON对象在vue中的获取方法
这两天在学习vue，主要是为了实现前后端的分离，因此数据的传输是必不可少的一个环节，这篇文章主要介绍了JSON数组和JSON对象在vue中的获取方法,需要的朋友可以参考下
2022-09-09
vue下载二进制流图片操作
这篇文章主要介绍了vue下载二进制流图片操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue.js进阶知识点总结
给大家分享了关于Vue.js想成为高手的5个总要知识点，需要的朋友可以学习下。
2018-04-04
ElementUI如何修改el-cascader的默认样式
ElementUI 是一套ui组件库，目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色，若用于项目开发，难免遇到要需求修改其默认样式的情况，这篇文章主要介绍了ElementUI如何修改el-cascader的默认样式,需要的朋友可以参考下
2023-12-12
Vue路由权限控制解析
这篇文章主要介绍了Vue路由权限控制的相关资料，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11
elementplus card 悬浮菜单的实现
本文主要介绍了elementplus card 悬浮菜单的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07