Vue3如何将props传入数据正确赋值给组件内部data属性

数据老陈

2026-8-30

问题原因

你的代码存在几个核心问题导致赋值失效：

计算属性（computed）是通过属性形式访问的，不是可调用的函数，你写this.files()本质是把计算属性当函数执行，会直接触发类型错误，根本拿不到返回值。
你定义的files计算属性完全冗余，它没有做任何转换逻辑，返回值就是this.items，属于无意义的中间层。
额外注意：如果父组件传入的items是异步加载后才赋值的（比如接口请求返回后才给items传值），仅在data初始化阶段赋值的话，后续prop更新不会自动同步到内部的itemsnew上。

正确实现方案

根据业务需求选对应写法即可：

场景1：仅需要props的初始值作为组件内部独立状态

如果你不需要itemsnew和后续父组件更新的items保持同步，只是拿初始值做内部状态修改，直接在data初始化时取props赋值即可，删掉多余的计算属性：

<template>
  {{ itemsnew }}
</template>
<script>
export default {
  name: 'ImageList',
  props: ['items'],
  data() {
    return {
      itemsnew: this.items,
      dragging: false,
    }
  },
}
</script>

场景2：需要itemsnew始终和父组件传入的items保持同步

如果你需要父组件更新items时，内部的itemsnew也跟着更新，添加watch监听prop变化同步赋值即可：

<template>
  {{ itemsnew }}
</template>
<script>
export default {
  name: 'ImageList',
  props: ['items'],
  data() {
    return {
      itemsnew: this.items,
      dragging: false,
    }
  },
  watch: {
    items(newVal) {
      this.itemsnew = newVal
    }
  }
}
</script>