props 在子组件中不可直接修改，应通过 defineprops 声明、watch 监听、computed 衍生、emit 通知父组件或 ref 创建本地副本等方式安全响应变化。
Props 在子组件中不能直接修改，这是 Vue 单向数据流的核心原则。所谓“安全修改”，实际是指：在不破坏响应性、不触发警告、不违反设计规范的前提下，让子组件能合理地响应 props 变化或间接影响父组件状态。关键不是改 props 本身，而是改“谁拥有这个值”。
一、正确接收 Props（声明方式决定安全性）
推荐使用 TypeScript 泛型 + defineProps，类型明确、IDE 提示强、编译期可捕获错误：
- 必填字段写成
title: string，不传会报错提示 - 可选字段加问号：
desc?: string，类型自动推导为string | undefined - 数组/对象等引用类型必须用函数返回默认值：
tags: string[]配合withDefaults时写default: () => [] - 避免用数组形式（如
defineProps(['msg'])），它无法校验类型、缺失默认值支持，容易埋坑
二、不要直接改 props，但可以安全响应变化
props 是只读的响应式对象。以下操作是安全的：
- 在模板中直接插值：
{{ props.title }}或解构后{{ title }}（需配合toRefs） - 用
watch监听 props 变化，执行副作用（如请求、重置内部状态）：watch(() => props.id, fetchDetail) - 用
computed衍生新值：const displayName = computed(() => props.name?.trim() || '未知用户')
以下操作会报警告，应禁止：
-
props.count++或props.items.push(x) -
const { title } = props后直接赋值（会丢失响应性，要用toRefs(props)）
三、需要“修改值”时，走标准通信流程
当子组件要改变父组件传来的数据，唯一合规路径是通知父组件自己更新：
- 父组件用
v-model:title="pageTitle"，子组件用defineModel（Vue 3.4+）或defineEmits(['update:title'])+emit('update:title', newValue) - 普通场景用
defineEmits声明事件，例如：const emit = defineEmits(['change', 'submit'])，再调用emit('change', newInput) - 父组件监听：
<child></child>，并在回调里更新自己的 ref 或 reactive 数据
不推荐用 props 传函数来“绕过 emit”，虽然可行，但模糊了数据流向，不利于维护和调试。
四、特殊场景：需要本地可编辑副本
如果子组件要提供表单编辑能力（比如弹窗编辑一条数据），应把 props 当作初始值，用独立 ref 管理本地状态：
-
const localData = ref({ ...props.editData })—— 浅拷贝避免污染原始数据 - 编辑完成后，通过
emit('save', localData.value)提交变更 - 若 props 更新（比如父组件重置了 editData），可用
watch同步回 localData（注意防循环）
这样既隔离了状态，又保留了与父组件的可控同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
