Vue 3 Composition API：克隆Prop后变量未定义及Prop修改疑问

你的核心判断完全正确：绝对不能直接修改Props #

Vue的单向数据流规则明确规定，Props是父组件传递给子组件的只读数据。你现在看似能修改props.invoice.total_amount，是因为invoice是引用类型的对象——修改对象的属性不会触发Vue的Props修改警告，但这完全违背了Vue的设计原则，会导致：

• 父组件和子组件的数据状态不一致，后期调试时难以追踪数据变化
• 破坏组件的可预测性，其他依赖该Props的组件会出现异常
• 违反单向数据流，组件间的数据流向变得混乱

正确实现输入框最大值限制的步骤 #

1. 创建本地响应式的Invoice副本 #

因为Props是只读的，我们需要克隆父组件传入的invoice对象，创建子组件内部的响应式数据，避免和原Props共享引用：

<script setup>
import { ref, watch } from 'vue'
import { formatThousands } from '@layouts/utils'

const props = defineProps({
    isDialogVisible: {
        type: Boolean,
        required: true,
    },
    invoice : {
        type: Object,
        required: true,
    },
    maxAmount : {
        type: Number,
        required: true,
    },
})

const emit = defineEmits([
    'submit',
    'update:isDialogVisible',
])

// 深克隆invoice对象，创建本地响应式数据
// 简单对象用JSON.parse(JSON.stringify())即可，复杂对象推荐用lodash的cloneDeep
const localInvoice = ref(JSON.parse(JSON.stringify(props.invoice)))

// 可选：如果父组件的invoice会动态更新，同步到本地数据
watch(
  () => props.invoice,
  (newInvoice) => {
    localInvoice.value = JSON.parse(JSON.stringify(newInvoice))
  },
  { deep: true }
)
</script>

2. 将输入框绑定到本地响应式数据 #

把原来绑定props.invoice的输入框，改成绑定本地的localInvoice：

<VTextField
    v-model="localInvoice.value.total_amount"
    type="number"
    density="compact"
    :label="'Total ' + localInvoice.value.currency"
 />

3. 添加监听器限制输入最大值 #

监听本地total_amount的变化，超过maxAmount时自动修正，同时处理非数字输入的情况：

<script setup>
// ... 其他代码

watch(
  () => localInvoice.value.total_amount,
  (newValue) => {
    const numValue = Number(newValue)
    // 处理非数字/空输入的情况
    if (isNaN(numValue)) {
      localInvoice.value.total_amount = 0
      return
    }
    // 限制最大值
    if (numValue > props.maxAmount) {
      localInvoice.value.total_amount = props.maxAmount
    }
  },
  { immediate: true } // 初始化时执行一次，防止初始值就超过最大值
)
</script>

4. 提交时传递本地修改后的数据 #

当用户触发提交操作时，通过emit把本地修改后的金额传递给父组件：

<script setup>
// ... 其他代码

const handleSubmit = () => {
  // 根据父组件需求，传递total_amount或者整个localInvoice对象
  emit('submit', localInvoice.value.total_amount)
  // 关闭模态框
  emit('update:isDialogVisible', false)
}
</script>

关于之前totalAmount为undefined的原因 #

你之前初始化const totalAmount = ref(props.invoice.total_amount)时，如果父组件传入的invoice本身没有total_amount字段，或者该字段初始值为undefined，那么totalAmount自然会是undefined。而使用本地克隆对象的方式，你可以在克隆时给缺失的字段设置默认值，比如：

const localInvoice = ref({
  ...JSON.parse(JSON.stringify(props.invoice)),
  total_amount: props.invoice.total_amount ?? 0
})

内容的提问来源于stack exchange，提问作者Aleksandar Đokić