Vue组件中buttonText prop意外突变报错问题求助

为什么不能直接修改prop？ #

Vue遵循单向数据流原则：prop是父组件传递给子组件的状态，子组件仅能读取，不能直接修改。如果子组件擅自修改prop，会导致父组件与子组件的状态不一致，难以追踪数据变化，这也是vue/no-mutating-props规则禁止该操作的核心原因。

你的代码问题 #

在handleClick方法中，你直接修改了作为prop的this.buttonText：

this.buttonText = "I have been clicked!!!";

这种操作违反了单向数据流规范，因此触发了ESLint报错。

两种可行的修复方案 #

方案1：使用本地数据副本（仅子组件内部使用） #

如果修改后的文本无需同步给父组件，仅在子组件内部展示，可以在子组件的data中定义本地变量，初始值复制prop的值，后续修改该本地变量即可：

修改ButtonDisabled.vue代码：

<template>
  <div class="main-container">
    <h1>Button Disable if nothing is enter in email field</h1>
    <div class="wrapper">
      <input type="email" placeholder="email" v-model="email" />
      <button :disabled="email.length < 1" class="btn-sub" @click="handleClick">
        Subcribe
      </button>
      <h2>{{ email }}</h2>
      <!-- 改为显示本地变量 -->
      <h1>{{ localButtonText }}</h1>
    </div>
  </div>
</template>

<script>
export default {
  name: "ButtonDynamic",
  props: {
    buttonText: {
      type: String,
      default: "clickMe",
      required: false,
    }
  },
  data() {
    return {
      email: "",
      // 初始化本地变量为prop的值
      localButtonText: this.buttonText
    };
  },
  methods: {
    handleClick() {
      // 修改本地变量而非prop
      this.localButtonText = "I have been clicked!!!";
    },
  },
};
</script>

方案2：通过$emit通知父组件修改（需同步父组件状态） #

如果希望父组件感知文本变化，需要子组件触发事件，由父组件修改对应数据源后，再通过prop传递给子组件：

1. 修改ButtonDisabled.vue，点击时触发自定义事件：

<template>
  <!-- 模板部分保持不变，仍显示buttonText -->
</template>

<script>
export default {
  // 其他代码不变
  methods: {
    handleClick() {
      // 触发自定义事件，传递新文本值
      this.$emit("update:buttonText", "I have been clicked!!!");
    },
  },
};
</script>

2. 修改App.vue，监听事件并更新父组件变量：

<template>
 <div>
    <!-- 使用v-model语法糖绑定prop与事件 -->
    <ButtonDisabled v-model:buttonText="parentButtonText" />
   </div>
</template>

<script>
export default {
  data() {
    return {
      parentButtonText: "ChangedText"
    }
  }
}
</script>

这里使用了Vue的自定义prop的v-model语法，本质是@update:buttonText="parentButtonText = $event"的语法糖，既符合单向数据流规范，又实现了文本更新的同步。

内容的提问来源于stack exchange，提问作者Ayesha