Vue3 关于子组件修改父组件属性的疑惑

我们知道,子组件通过 prop 接收父组件的传值,而且子组件也是禁止直接通过 prop 修改父组件的值。

但在 Vue3 中,这个限制似乎被 toRef 打破了。

假设父组件传下面的对象给子组件

{
  list: []
}

在 Vue3 的子组件里,如果通过下面的代码修改,会警告

export default defineComponent({
  props: {
    params: Object
  },
  setup(props) {
    props.params.list.push(1) // 会警告,但依然能生效
  }
})

但通过下面的方法修改,就能消除警告

export default defineComponent({
  props: {
    params: Object
  },
  setup(props) {
    const list = toRef(props.params, 'list')
    list.push(1) // 没有警告了,依然生效
  }
})
posted @ 2021-04-08 21:18  尹宇星_Kim  阅读(2702)  评论(0编辑  收藏  举报