vue子组件修改父组件传递过来的值

把一个布尔值传递给子组件,然后,在子组件中修改该值,会报错

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

原因:

在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。

Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。

解决办法:
  原理:将要更改的值,传递给父组件,在父组件中更改,再传递给子组件
 步骤:
  先将值传递给子组件,子组件 props 接收并使用,然后通过 $emit 广播一个事件给父组件,并将值一并传递,父组件 @子组件广播过来的事件,并定义一个方法,在该方法中,改变传递过来的值,父组件又会将值传递给子组件,这样就形成了一个闭环,问题得以解决

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,有多种方式可以让组件修改组件传递。 一种方式是通过在组件中使用`$emit`方法,触发一个自定义事件,并且将修改后的作为参数传递组件。比如,在组件中定义一个`change`方法,然后通过`this.$emit('update:value', newValue)`来触发名为`update:value`的事件,将新的`newValue`传递组件。这样组件就可以通过监听`update:value`事件来获取组件修改后的。 另一种方式是使用`.sync`修饰符。在组件中通过`v-bind`指令将组件绑定到组件的属性中,并且使用`.sync`修饰符将组件对该属性的修改同步到组件。比如,在组件中将`value`属性传递组件时,我们可以使用`<child-component :value.sync="value"></child-component>`来实现双向绑定。这样组件就可以直接修改`value`属性,并且组件会同步更新。 还有一种方式是使用`v-model`指令。在组件中通过`v-model`指令将组件绑定到组件的属性中,并且在组件中使用`$emit`方法触发名为`input`的事件来更新该属性。比如,在组件中使用`<child-component v-model="value"></child-component>`来实现双向绑定。这样组件修改`value`属性时,会自动触发`input`事件,从而更新组件。 综上所述,Vue组件可以通过使用`$emit`方法、`.sync`修饰符或`v-model`指令来修改组件传递。这些方式都可以实现组件组件之间的双向数据绑定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值