Vue2中$emit传递Math.random()未返回正确随机数的问题排查

问题1：点击按钮始终得到整数，而非预期的随机小数 #

你的代码里存在一个关键错误：在App.vue的模板中，你给@add绑定的是add(10)，这意味着每次触发add事件时，都会固定传入参数10，完全忽略了子组件通过$emit传递的随机数。这就是为什么每次点击都只加整数10的原因。

修正方法 #

将App.vue中的事件绑定修改为以下两种方式之一：

方式1：直接绑定方法名（推荐）

<template>
  <div id="app">
    <h1>Emitting and Listening to Events</h1>
    <InlineEmitEventChild @add="add" />
    <p class="count-text">
      Count: <strong>{{ count }}</strong>
    </p>
  </div>
</template>

这种写法会自动将子组件$emit传递的参数传递给add方法，你的methods中的add(i)就能正确接收随机数。

方式2：使用箭头函数接收参数

<template>
  <div id="app">
    <h1>Emitting and Listening to Events</h1>
    <InlineEmitEventChild @add="(i) => add(i)" />
    <p class="count-text">
      Count: <strong>{{ count }}</strong>
    </p>
  </div>
</template>

这种写法可以明确指定接收子组件传递的参数i，再传给add方法，适合需要在模板中做简单参数处理的场景。

修改后，点击按钮就能正确累加子组件传递的Math.random()生成的随机小数了。

问题2：教程中<ChildComponent @add="(i) => count += i"写法的原因 #

这种箭头函数的写法主要有两个作用：

• 简化逻辑实现：无需在methods中单独定义处理方法，直接在模板中完成count += i的简单累加逻辑，减少代码量。
• 明确接收参数：通过(i)显式声明接收子组件$emit传递的参数，确保参数能正确被获取并使用，避免出现像你代码中那样固定传参的错误。这种写法尤其适合逻辑简单的事件处理场景，让模板代码更直观。

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