Vue 3 eliminiert die Reaktivität von Komponenten-Requisiten

Question

Ich habe die EditTransaction-Komponente und nenne sie so:

<edit-transaction
    v-if="editableTransaction.id === transaction.id"
    :key="'transaction'+transaction.id+etcount"
    :class="{'bg-red-300': type === 'expense', 'bg-green-300': type === 'income'}"
    :groups-prop="modelValue"
    :transaction="transaction"
    class="planning-transactions-item px-10 rounded-2xl w-[90%]"
    @close="editableTransaction = {id: null}">
</edit-transaction>

Wie Sie sehen, sende ich darin ein Transaktionsobjekt. Da es sich um einen Editor handelt, möchte ich nicht, dass das Transaktionsobjekt reaktiv ist. Wenn jemand den Editor schließt, möchte ich das ursprüngliche Transaktionsobjekt und nicht das geänderte Transaktionsobjekt. Wenn ich also Recht habe und den Proxy entfernen möchte, füge ich ihn in den Editor ein:

const form = toRaw(props.transaction)

In der Editor-Vorlage gibt es einige Asset-Komponenten, deren V-Modell-Werte an das Formularobjekt gebunden sind

<div class="flex gap-5 w-full">
    <FormInput id="et-date" v-model="form.due_date" class="et-fields tw-fields w-[150px]"
               placeholder="Date"
               type="date"
               @keyup.enter="saveChanges"></FormInput>
    <FormInput id="et-name" v-model="form.name" class="et-fields tw-fields" placeholder="Name"
               @keyup.enter="saveChanges"></FormInput>
    <FormInput id="et-value" v-model="form.value" class="et-fields tw-fields" mask-thousand
               placeholder="Value"
               @keyup.enter="saveChanges"></FormInput>
</div>

Das Problem ist, dass sich das Formularobjekt und auch die Transaktionseigenschaften ändern, wenn ich den Transaktionsnamen ändere. Daher ändern sich auch die Namen in den übergeordneten Daten, da Transaktionseigenschaften reaktiv sind. Was mache ich falsch oder wie kann ich ein Formularobjekt implementieren, dessen Werte bei der Komponentenerstellung mithilfe von Requisitenwerten und ohne Delegaten ausgefüllt werden?

Answer 1

使用 props 将初始值传递给子组件的状态是很常见的。这意味着您“复制”了本地 data 中某个 prop 的值。它可以确保 prop 值免受意外更改的影响： 在 Vue 中阅读更多内容文档

这是一个非常简单的示例，展示了上述方法：

/your-child-component-vue/

export default {
  props: ['initialCounter'],
  data() {
    return {
      // counter only uses this.initialCounter as the initial value;
      // it is disconnected from future prop updates.
      counter: this.initialCounter
    }
  }
}

现在，阅读您的示例，我发现您正在尝试更新表单中的某些数据，并且您不想更改初始信息，除非通过按钮或其他内容确认。解决这个问题的流程是：

• 将用户可能更改的初始数据作为 prop 传递。
• 如果用户通过输入元素更改了某些数据，但未确认这些更改（通过按钮），请保持数据不变（这意味着您不会向父元素发出任何更改，保持 prop 值不变）
• 如果用户更改了某些数据并确认了它，则将更新后的数据发送给父级 (this.$emit)，以便它了解更改。

Answer 2

所以我找到了两个解决方案：

const form = reactive({...props.transaction})

或

const form = Object.assign({}, props.transaction)

两者都有效，当我更改表单值时，它不会改变道具。