Prop 意外突变

Question

我将

apiStepNumber

属性从父组件传递到子组件，并在子组件中将其用作

v-model

值

注意：代码片段不起作用。请避免运行它们。片段仅供理解之用

父组件

我在父组件内调用各种 API，并将

apiNumber data variable

更新为 1 2 3.. 在成功的 API 调用后将其作为

apiStepNumber

属性传递。

if(firstApiCallSuccessful) this.apiNumber = 2;

if(secondApiCallSuccessful) this.apiNumber = 3;

..so on

<child-component :apiStepNumber="apiNumber"></child-component>

子组件

（我使用

apiStepNumber

属性作为 v 模型值和其他基本计算，但在

"Unexpected mutation of 'apiStepNumber' prop"

处出现错误

v-model="apiStepNumber"

）

<script>
export default {
    props: {
        apiStepNumber: {
            type: Number,
            required: true,
            default: 1,
        },
    },
    data() {
        return {
            steps: [
                { id: 1, text: "Emailing the Link" },
                { id: 2, text: "Getting Details" },
                { id: 3, text: "Extracting Data" },
                { id: 4, text: "Validating Data" },
                { id: 5, text: "Almost there..." },
                { id: 6, text: "All Done!" },
            ],
        };
    },
}
</script>

<v-stepper v-model="apiStepNumber" vertical>
  <v-stepper-step
    v-for="(item, i) in steps"
    :key="item.id"
    :complete="apiStepNumber > i + 1"
    :step="i + 1"
    :color="apiStepNumber > i + 1 ? 'success' : 'primary'"
  >{{ item.text }}</v-stepper-step>
</v-stepper>

我尝试过的

1. 将 prop 值保存在子组件内的本地数据变量中，并使用该本地变量而不是直接使用 prop，但这不符合我的要求。
2. 尝试查看 StackOverflow 上有关此主题的其他帖子，但无法解决问题。

提前感谢您对此的帮助。

Answer 1

正如错误所述，道具不能被改变。除非子级需要拥有自己的状态（例如撤消更改），否则它需要父级将所有更改应用到状态，这就是双向绑定的工作方式。

孩子需要在变化时发出事件：

<v-stepper
  :modelValue="modelValue"
  @update:modelValue="$emit('update:modelValue', $event)"
>

apiStepNumber

需要重命名为

modelValue

以遵循

v-model

约定，因此家长可以使用

<child v-model="stepNumber">