vue问题 - 在子组件中修改父组件传来的props值

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: "checkedKeys"

在子组件中修改父组件传来的props的值,报错

解决:

props: {
    checked: {
      type: Array,
      default: () => null
    }
  },
data(){
    return {
      checkedKeys:this.checked
    }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 ,如果组件修改了一个传递给子组件,但子组件没有更新,可能是因为没有正确地使用响应式属性或没有使用正确的更新方法。 首先,确保你在组件使用了响应式属性。在 Vue 3 ,你可以使用 `ref` 或 `reactive` 函数来创建响应式属性。如果你使用的是 `ref`,则需要使用 `.value` 来访问和修改。 例如,在组件创建一个响应式属性: ```javascript import { ref } from 'vue'; export default { setup() { const value = ref('initial value'); // 修改 setTimeout(() => { value.value = 'new value'; }, 1000); return { value, }; }, }; ``` 然后,确保你将这个响应式属性传递给了子组件,并在子组件正确地使用了它。 在子组件,你可以使用 `props` 接收组件传递的属性,并且在模板或逻辑使用它。确保在模板正确地绑定这个属性,并使用它来渲染内容。 例如,在子组件接收并使用组件传递的属性: ```javascript export default { props: ['value'], }; ``` ```html <template> <div>{{ value }}</div> </template> ``` 这样,当组件发生变化时,子组件将自动更新。 如果你修改了一个响应式属性的内部属性,而不是整个属性本身,你需要使用 `toRef` 或 `toRefs` 来创建一个只读的引用,并将其传递给子组件。 例如,在组件修改内部属性: ```javascript import { ref, toRef } from 'vue'; export default { setup() { const obj = ref({ value: 'initial value' }); // 修改内部属性 setTimeout(() => { obj.value = 'new value'; }, 1000); return { value: toRef(obj, 'value'), }; }, }; ``` 然后,在子组件接收并使用组件传递的引用: ```javascript export default { props: ['value'], }; ``` ```html <template> <div>{{ value }}</div> </template> ``` 这样,当组件的内部属性发生变化时,子组件也会更新。 希望这些解释能够帮助你解决问题。如果还有其他疑问,请随时提问!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值