vue props属性值不能在本组件内修改

最新推荐文章于 2024-03-14 16:31:39 发布
最新推荐文章于 2024-03-14 16:31:39 发布
阅读量6.3k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shelbyandfxj/article/details/82426740
版权

有一个组件build，其中有一个props属性是floorId，当在build组件中修改floorId的值时，会报下面的错误

原因是：在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。

小静仔
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue - 解决子组件中修改props值报错(error Unexpected mutation of “---“ prop vue/no-mutating-props)
王光迪的CSDN
02-24 3万+
error： Unexpected mutation of "、、、" prop vue/no-mutating-props
Vue 使用Props属性实现父子组件的动态传值详解
10-16
今天小编就为大家分享一篇Vue 使用Props属性实现父子组件的动态传值详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue组件props传值对象获取不到的问题
01-19
先说问题，父组件利用props向子组件传值，浏览器 console 有这个值，但是获取不到内部的属性，困了我3个小时，真的** personal console 以下为原代码 1、home.vue（父组件）–personal是被传的参数 <!--子组件--> <form-picker class=form-picker :personal=personal > </form-picker> export default { data(){ return{ personal:{ state:'',////判断是修改状态，还是新增状态 add
vue 修改props
最新发布
╮(╯_╰)╭ Don't expect me to reply to you in time
03-14 444
来触发自定义事件并传递数据。如果要修改Props的值，需要先将其作为本地变量进行存储，然后再使用。这样就能够在子组件中修改Props的值了。方法，最终更新父组件的Prop值。事件，从而将新的值传递给父组件的。在Vue中，我们可以通过。
Vue中父子Props传值不能修改的原因分析以及解决办法
MtangEr的博客
12-19 1544
vue 父子传值prop值不能修改，保持单向数据流
子组件中修改props值报错(error Unexpected mutation of “---“ prop vueno-mutating-props)
jadetii的学习地盘
04-21 1633
总结：多个组件需要使用的数据可用全局事件总线（一方修改多方变化，但缺点也很明显：要注意全局变量重复问题，而且需要在订阅事件的组件里手动销毁监听否则会多次执行。），但部分数据只存在于一两个组件间时可以用props传递，但修改时要注意规避单向数据流的问题。父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值。但是反过来则不行，不应该在一个子组件内部改变 prop。1.只是在当前组件使用不传回数据可以利用拷贝（必要时可使用深拷贝）和计算属性得到数据后使用。
props只读性
舍予
08-03 183
组件无论是使用函数声明还是通过class声明，都觉不能修改自身的props. 他有一个严格的规则： 所有的React组件都必须向纯函数一样保护他们的props不被更改。
解决props绑定数据，不可篡改 （.sync修饰符）
唯心所现，唯识所变
12-16 1138
子组件不能直接对父组件prop进行重新赋值，但是注意了父组件是引用类型的时候，子组件可以修改父组件的props里的属性。 好了进入主题： 当我们使用prop的时候，不想数据是单向流的，想子组件改变的时候父组件也改变，那么我们有两种方法来解决这个问题： 1. 比较复杂 子组件 <template> <div> <input @input="onInput" :value="value"/> </div> </template
Vue解决子组件修改父组件props参数不可逆问题
孙振光的博客
02-11 2351
直接赋值props里面数据会导致如下错误 1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件 修改后： 父组件 //html <tree-list :typeList="typeList" :subTypeList="subTypeList" @showSubType="updateSubType"></tre...
表单中某些组件值设置不成功的处理
秋小鬼的博客
10-11 381
问题描述：时间组件值未显示，调用form.setValues(data)方法 处理方式：下拉框、时间框等，可单独使用setRawValue(value)方法来设置值
Vue 源码（三）Props原理
自己整理的一些前端知识
08-11 221
highlight: tomorrow-night-eighties theme: cyanosis 前言 通过这篇文章将了解 子组件 Vue 实例是怎么获取传入的props数据的 prop 响应原理 传入的prop数据是怎么添加到vm.$options.propsData上的 在开始之前需要明确一下： 在createComponent函数中，会执行extractPropsF...
Vue中子组件props接受父组件传递的值，能不能修改？
MISS_zhang_0110的博客
01-13 4298
Vue中子组件props接受父组件传递的值，能不能修改？
vue props 一次传多个值实例
01-19
数组： ”[…array]”> 对象： ”{…obj}”> 或者： ”obj”> 子组件： <i class=fa aria-hidden=true></i> </span>
vue2.0 子组件改变props值,并向父组件传值的方法
11-28
为什么我们会有修改 prop 中数据的冲动呢？通常是这两种原因： prop 作为初始值传入后，子组件想把它当作局部数据来用； prop 作为初始值传入，由子组件处理成其它数据输出。 对这两种原因，正确的应对方式是： 定义...
Vue props中的值没有及时更新
qq_25287347的博客
07-14 4499
如果以上方法都没有解决问题，可以尝试使用 Vue 开发者工具进行调试。通过查看 props 的值是否正确更新，可以更好地定位问题所在。记得排除其他因素，如是否存在其他影响 props 更新的逻辑。
Vue - 子组件中修改props值报错的解决办法
小草莓的博客
11-26 3461
赋值为一个新的值，当监听到值变化时，同时将消息告诉父组件
Vue 子组件直接修改 props 中的属性值（单向数据流）
热门推荐
Microven
03-02 1万+
理论 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。 Vue3 Props 文档 尝试通过下面的方法直接修改属性值 this.$props.modelValue
【VUE】Vue组件中props传值，有些值可以直接修改有些不可以的问题
印记
05-13 1237
问题：Vue组件中props传值，有些值可以直接修改有些不可以 分析：JavaScript 中对象和数组的变量间赋值是通过引用赋值的 ...
Vue子组件不能直接更改props的原因以及单向数据流
m0_61093181的博客
04-28 1181
Vuex是Vue的状态管理库，它提供了一个集中式的存储机制来管理应用程序中的所有组件的状态。通过使用Vuex，我们可以在子组件中派发一个事件，触发父组件的方法来更新props中的数据。如果子组件可以修改props中的数据，那么将会打破单向数据流的规则，导致数据变得难以追踪和维护。综上所述，Vue遵循单向数据流的概念，子组件不能直接修改父组件中通过props传递的数据。通过派发事件并在父组件中定义一个方法来更新props中的数据，我们可以保持单向数据流的规则，使应用程序更加易于维护和理解。
使用vue2在组件内部改变props的值
04-06
不推荐在组件内部改变props的值，因为props是父组件传递给子组件的数据，应该由父组件控制这些数据。如果需要在子组件内部修改props的值，可以通过在子组件内部声明一个与props同名的data属性，并在created钩子函数中将props的值赋给data属性，然后在子组件内部操作data属性即可。例如： ``` <template> <div> <p>{{ message }}</p> <button @click="changeMessage">Change Message</button> </div> </template> <script> export default { props: { initialMessage: { type: String, required: true } }, data() { return { message: '' } }, created() { this.message = this.initialMessage }, methods: { changeMessage() { this.message = 'New Message' } } } </script> ``` 在父组件中使用时，可以通过v-bind指令将父组件的数据传递给子组件的props： ``` <template> <div> <child-component :initial-message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello World' } } } </script> ``` 这样，在子组件中就可以通过操作data属性来修改props的值了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值