Vue+TypeScript中能否直接修改只读数组Prop并更新UI？

首先明确：不能直接修改Vue的prop来更新UI，这是Vue单向数据流的核心规则，不管用不用TypeScript都得遵守。

你遇到的情况原因很清晰：

• npm run dev时，Vue仅给出警告但未完全限制修改操作，但prop本质是父组件传递的只读数据，所以删除元素的操作无法触发响应式更新，UI自然没变化。
• npm run build时TypeScript做严格类型检查，直接将prop标记为只读，因此抛出TS2540错误，禁止赋值修改。

复制到ref里能正常操作，是因为ref是组件自身的响应式状态，属于可修改的内部变量，修改它会触发UI更新，但这不是最优解——如果父组件也需要同步数组变化，这种做法会导致数据不一致。

正确的做法是通过自定义事件让父组件修改原数组：

1. 子组件定义删除方法，触发自定义事件并传递要删除的索引/元素。
2. 父组件监听该事件，在处理函数中修改自身的响应式数组（父组件的数组需用ref或reactive声明）。

举个TS示例：
首先定义自定义类型：

interface TaskSolution {
  id: number;
  content: string;
  // 补充你的其他字段
}

子组件代码：

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

interface TaskSolution {
  id: number;
  content: string;
}

// 定义prop
const props = defineProps<{
  sentences: TaskSolution[];
}>();

// 定义自定义事件
const emit = defineEmits<{
  'delete-solution': [index: number];
}>();

// 删除方法
const handleDelete = (index: number) => {
  emit('delete-solution', index);
};
</script>

<template>
  <div v-for="(item, index) in sentences" :key="item.id">
    <span>{{ item.content }}</span>
    <button @click="handleDelete(index)">删除</button>
  </div>
</template>

父组件代码：

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

interface TaskSolution {
  id: number;
  content: string;
}

// 父组件的响应式数组
const sentences = ref<TaskSolution[]>([
  { id: 1, content: '方案1' },
  { id: 2, content: '方案2' },
]);

// 处理删除的方法
const handleDeleteSolution = (index: number) => {
  sentences.value.splice(index, 1);
};
</script>

<template>
  <ChildComponent :sentences="sentences" @delete-solution="handleDeleteSolution" />
</template>

这种做法既符合Vue数据流规则，能通过TypeScript类型检查，还能保证父、子组件的数据同步。

内容的提问来源于stack exchange，提问作者flori10