Vue中emit事件触发失效求助：按钮点击无响应

在Step1子组件中尝试向App组件emit事件，但点击Next和Previous按钮时无任何响应，虽已在Step1中处理事件，仍无法定位问题。

<template >
  <div class="container">
    <div class="content-wrapper">
      <h1>Step 1</h1>
      <div class="form-group">
        <label>First Name</label
        ><input
          name="name"
          v-model="firstName"
          placeholder="Your first name"
          class="form-control"
          required
        />
      </div>
      <div class="form-group">
        <label>Last Name</label
        ><input
          name="lastname"
          v-model="lastName"
          placeholder="Your last name"
          class="form-control"
          required
        />
      </div>
      <button type="button" @click.prevent="nextStep" class="btn">
        Next step
      </button>
    </div>
    <Button firstName="firstName" lastName="lastName" />
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  inject: ["firstName", "lastName"],
  data() {
    return {
      firstName: this.firstName,
      lastName: this.lastName,
    };
  },
  components: {
    Button,
  },
  methods: {
    nextStep() {
      this.$emit("next");
    },
  },
};
</script>

1. 父组件未监听子组件的emit事件 #

Step1组件的nextStep方法触发了next事件，但App组件中使用Step1时，没有绑定对应的事件监听，导致事件触发后无后续处理。

修正方式：在App组件中使用Step1时添加事件监听：

<Step1 @next="currentStep = 2" @prev="currentStep = 0" />

2. 数据传递错误 #

• 原代码中Button组件的firstName和lastName传递的是字符串"firstName"，而非组件内的变量，导致Button无法获取正确数据；
• 使用inject后又在data中重新赋值，切断了与provide数据源的响应式关联，v-model修改的只是本地数据，无法同步到父组件。

修正方式：

• 父子组件传递数据时，改用props替代inject（跨层级传递才推荐使用provide/inject）；
• Button组件传参时用冒号绑定变量：

<Button :firstName="firstName" :lastName="lastName" />

3. Previous按钮事件未处理 #

原代码未实现Previous按钮的事件逻辑，需在Button组件中emitprev事件，再在Step1中监听并转发给App。

修正后的Step1组件：

<template >
  <div class="container">
    <div class="content-wrapper">
      <h1>Step 1</h1>
      <div class="form-group">
        <label>First Name</label>
        <input
          name="name"
          v-model="firstName"
          placeholder="Your first name"
          class="form-control"
          required
        />
      </div>
      <div class="form-group">
        <label>Last Name</label>
        <input
          name="lastname"
          v-model="lastName"
          placeholder="Your last name"
          class="form-control"
          required
        />
      </div>
      <button type="button" @click.prevent="nextStep" class="btn">
        Next step
      </button>
    </div>
    <Button :firstName="firstName" :lastName="lastName" @prev="prevStep" />
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  props: ['firstName', 'lastName'],
  components: {
    Button,
  },
  methods: {
    nextStep() {
      this.$emit("next");
    },
    prevStep() {
      this.$emit("prev");
    },
  },
};
</script>

4. App组件示例 #

<template>
  <div>
    <Step1 
      v-if="currentStep === 1" 
      :firstName="formData.firstName" 
      :lastName="formData.lastName"
      @next="currentStep = 2"
      @prev="currentStep = 0"
    />
    <!-- 其他步骤组件 -->
  </div>
</template>

<script>
import Step1 from './components/Step1.vue';
export default {
  components: { Step1 },
  data() {
    return {
      currentStep: 1,
      formData: {
        firstName: '',
        lastName: ''
      }
    }
  }
}
</script>

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