一、为啥子组件不能直接改 props？

p标签开头：“在Vue3开发过程中，很多刚接触的小伙伴都会碰到一个疑惑：子组件能不能直接修改父组件传过来的props值？要是不能直接改，那想调整props的值时该走什么路子？今天就把Vue3里props修改的门道拆开来，从「能不能改」到「怎么正确改」，一次性讲明白。”
Vue里有个「单向数据流」的设计规则——props的数据是父组件流向子组件的，你可以理解成父组件是「数据源头」，子组件只是「接收者」，要是子组件直接去改props里的值，就相当于在「下游」偷偷改了「上游」传下来的水，这会让数据的流向变得混乱，后续调试的时候根本搞不清到底是哪里把数据改坏了。

举个实际的例子：父组件传了个msg给子组件，子组件里写props.msg = '新内容'，Vue控制台立马会蹦出警告，说「Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.」（别直接改prop，因为父组件重新渲染时值会被覆盖），这背后的逻辑是：父组件一旦重新渲染（比如自身数据变化），传给子组件的props会重新赋值，子组件之前私自改的内容就会被父组件的新值覆盖，等于白改了，还容易让页面状态和数据对不上。

所以Vue从设计上就不允许子组件直接篡改props，目的是让数据的变化路径清晰可控，减少项目后期维护时的「找 Bug 噩梦」。

想改 props ？这几种正确方法得记好

既然不能直接改，那碰到要调整props的需求时，得用Vue认可的方式来处理，下面这三种方法，覆盖了绝大多数业务场景，学会了能解决90%以上的props修改问题。

喊父组件来改：emit 事件通知 + 父组件更新

子组件的核心思路是「我不自己改，我告诉父组件『你该更新数据啦』」，具体步骤是：子组件用emit触发一个自定义事件，把要修改后的值传出去；父组件监听这个事件，拿到新值后更新自己的数据源（因为props是父组件数据传过来的，父组件改了自己的数，子组件的props自然会跟着变）。

举个实际开发里常见的场景：父组件传了个title给子组件，子组件有个编辑按钮，点了之后要把title改成「编辑后内容」。

子组件代码（Child.vue）：

<template>
  <div>{{ title }}</div>
  <button @click="handleEdit">点击修改标题</button>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
// 第一步：接收父组件的props
const props = defineProps(['title']) 
// 第二步：定义要触发的事件
const emit = defineEmits(['updateTitle']) 
const handleEdit = () => {
  // 第三步：触发事件，把新值传出去
  emit('updateTitle', '编辑后内容') 
}
</script>

父组件代码（Parent.vue）：

<template>
  <!-- 第四步：把父组件的title传给子组件，并监听事件 -->
  <Child :title="parentTitle" @updateTitle="parentTitle = $event" />
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
// 父组件自己的数据源
const parentTitle = ref('初始标题') 
</script>

这种方式完全符合「单向数据流」规则：数据从父到子，子组件只负责「通知」，真正修改数据的是父组件自己，项目里像「子组件提交表单后更新父组件列表」「子组件点击按钮切换父组件弹窗状态」这些场景，都适合用emit通知的方式。

本地搞个“副本”：计算属性 + watch 处理

要是子组件需要基于props做一些「只在自己内部生效，不影响父组件」的修改，比如子组件里对父组件传的列表做筛选、排序，或者临时添加数据，这时候可以在子组件里搞个「本地副本」，把props的值复制过来，之后改这个副本就行。

具体做法是：用ref或computed存一份props的拷贝，再用watch监听props的变化，一旦父组件的props更新，子组件的本地副本也跟着同步，这样父组件数据变了，子组件能跟上；子组件改自己的副本，父组件那边也不受影响。

举个例子：父组件传了个userList给子组件，子组件要给列表加个「临时标记」，但不想影响父组件的原始列表。

子组件代码（Child.vue）：

<template>
  <ul>
    <li v-for="user in localUserList" :key="user.id">
      {{ user.name }} —— {{ user.isTemp ? '临时' : '原始' }}
    </li>
  </ul>
  <button @click="addTempUser">添加临时用户</button>
</template>
<script setup>
import { defineProps, ref, watch } from 'vue'
// 接收父组件的userList
const props = defineProps(['userList']) 
// 本地副本，用ref存起来
const localUserList = ref([]) 
// 监听props.userList的变化，同步到本地副本
watch(() => props.userList, (newList) => {
  // 深拷贝或者浅拷贝看需求，这里简单展开再合并（浅拷贝示例）
  localUserList.value = [...newList] 
}, { immediate: true }) // immediate:true 表示组件一加载就执行一次监听
const addTempUser = () => {
  // 改本地副本，父组件的userList不受影响
  localUserList.value.push({ 
    id: Date.now(), 
    name: '临时用户', 
    isTemp: true 
  })
}
</script>

这种场景下，子组件的修改完全是「内部操作」，父组件的原始数据毫发无损，像「子组件内部搜索筛选列表」「临时添加编辑标记」这类需求，用计算属性+watch存副本的方式就很合适。

Vue3.3+ 新语法糖：defineModel 一键双向绑定

Vue3.3版本之后，出了个超方便的语法糖defineModel，专门用来简化「子组件和父组件双向绑定props」的场景，以前要写props+emit('update:xxx')的代码，现在用defineModel能少写好多重复代码。

原理是这样的：defineModel内部自动帮你处理了「接收props」和「触发update事件」这两步，子组件里用defineModel定义的变量，既可以当props用，也能直接修改（修改时会自动触发父组件的更新）。

举个常见的「自定义输入框组件」场景：父组件传个value给子组件，子组件输入框内容变化时，父组件的value也跟着变。

子组件代码（ChildInput.vue，Vue3.3+）：

<template>
  <!-- 直接用v-model绑定defineModel定义的变量 -->
  <input v-model="inputValue" placeholder="请输入内容" />
</template>
<script setup>
// 用defineModel定义，相当于同时处理了props和emit
const inputValue = defineModel() 
// 也可以给defineModel传参数，比如父组件用v-model:username，子组件就写defineModel('username')
// const username = defineModel('username')
</script>

父组件代码（Parent.vue）：

<template>
  <!-- 用v-model双向绑定，不需要手动写@update:xxx -->
  <ChildInput v-model="parentValue" />
  <p>父组件的值：{{ parentValue }}</p>
</template>
<script setup>
import { ref } from 'vue'
import ChildInput from './ChildInput.vue'
const parentValue = ref('初始内容')
</script>

你看，子组件里直接改inputValue.value（比如加个按钮触发修改），父组件的parentValue会自动跟着变，不用手动写emit，这种方式特别适合「自定义表单组件」「需要双向同步状态的组件」，代码量直接减半，开发效率起飞～

不同场景下，选哪种修改方式更合适？

知道了有哪些方法，接下来得根据实际场景选最顺手的，不然明明用defineModel能偷懒，结果硬写emit，反而给自己找不痛快，下面分三种常见场景来说：

场景1：子组件只负责“通知”父组件更新

子组件点击按钮，父组件更新整个列表数据」「子组件关闭弹窗，父组件修改弹窗显示状态」这类情况，选emit通知父组件的方式，核心逻辑是「子组件不碰数据，只触发事件」，父组件自己决定怎么改数据，这种场景下数据流向最清晰，出了问题也好排查。

场景2：子组件内部临时处理，不影响父组件

像「子组件对父组件传的列表做本地筛选」「子组件给数据加临时标记」这类需求，选计算属性+watch存副本的方式，因为修改的是子组件自己的副本，父组件的数据还是干干净净的，两边互不干扰。

场景3：子组件和父组件需要双向同步数据

自定义输入框组件」「自定义开关组件」这类表单类组件，子组件的值变化要立刻同步给父组件，父组件的值变化也要同步给子组件，这时候用Vue3.3+的defineModel语法糖最舒服，代码少还不容易出错。

另外得强调下反模式：有些同学图省事，直接在子组件里写props.xxx = '新值'，这会触发Vue的警告，而且数据逻辑会乱套（父组件下次更新props时，子组件改的内容会被覆盖），所以哪怕需求再简单，也别直接改props，一定要走正规流程～

理解单向数据流，才能写好可维护的代码

最后再唠唠Vue「单向数据流」的设计理念，为啥Vue要搞这么个规则？本质是为了让数据变化可预测，想象一下，如果每个子组件都能随便改props，那么父组件的数据可能在多个子组件里被偷偷修改，调试的时候你根本不知道是哪个子组件改了数据，项目大了之后完全没法维护。

举个极端点的例子：父组件传了个total给三个子组件，每个子组件都能直接改total，今天A组件把total加了1，明天B组件把total减了2，后天C组件又把total改成0……最后total变成多少完全没法预判， Bug 排查起来比大海捞针还难。

而遵循单向数据流，数据只能从父到子，子组件要改数据只能通过「通知父组件」的方式，这样所有数据变化都有明确的「触发点」，调试时看父组件的数据源和子组件的emit事件，就能快速定位问题，这也是Vue这类前端框架能让大型项目保持可维护性的关键设计之一。

所以呀，现在再回头看「子组件能不能改props」这个问题，答案不只是「不能直接改」，更要理解背后的设计逻辑，然后用正确的方法（emit、本地副本、defineModel）来满足业务需求，这样写出来的代码，既符合Vue的规则，又好维护,后期迭代也更省心～