Vue组件间传递float变量tmp_sell失败，始终返回0求助

问题根源分析 #

你遇到的传值失败主要有3个核心问题：

1. 全局事件监听方式错误 #

你在Main.vue的input标签上用@tmp_sell="getTmpSell"绑定事件，但$root.$emit触发的是全局事件，无法通过DOM元素直接监听，必须在组件生命周期钩子中用$root.$on注册监听。

2. 误用props接收事件值 #

props是父组件向子组件传递数据的单向通道，不能用来接收子组件通过事件传递的值，直接修改props也违反Vue的单向数据流规则，会导致数据更新异常。

3. 不必要的DOM直接操作 #

Vue推荐通过数据驱动视图，用document.getElementById手动修改输入框值的方式不符合Vue的设计思想，容易引发视图与数据不同步的问题。

修复后的代码示例 #

AllProductsChoose组件（子组件） #

调整事件名（避免和变量名重名造成混淆），确保逻辑正确：

<tr @click.prevent="choosenOneProduct($event, p, i)">
  <td> (Click Here) </td>
</tr>

<script>
export default {
  data() {
    return {
      tmp_sell: 0,
      tmp_one_sell: 0 // 确保该变量已正确赋值
    }
  },
  methods: {
    choosenOneProduct(ev, p, i) {
      const choose_product_ref = firebase.firestore().collection("all_products").where("p_fullname", "==", p.p_fullname);
      choose_product_ref.onSnapshot((snapshot) => {
        snapshot.docs.forEach(d => {
          this.tmp_sell += this.tmp_one_sell;
          // 用语义化事件名触发全局事件
          this.$root.$emit('tmp_sell-updated', this.tmp_sell);
        })
      })
    }
  }
}
</script>

Main.vue（父组件） #

移除错误的props定义，改用本地data变量存储值，通过生命周期钩子监听全局事件：

<!-- 用v-model绑定本地变量，实现数据驱动视图 -->
<input id="q_subtotal" v-model.number="localTmpSell" />

<script>
export default {
  data() {
    return {
      localTmpSell: 0 // 定义本地变量接收传值
    }
  },
  created() {
    // 注册全局事件监听
    this.$root.$on('tmp_sell-updated', (receivedValue) => {
      this.localTmpSell = receivedValue;
      console.log('received value:', receivedValue);
    })
  },
  beforeUnmount() {
    // 组件销毁前移除监听，防止内存泄漏
    this.$root.$off('tmp_sell-updated');
  }
}
</script>

额外注意事项 #

• 确保tmp_one_sell在AllProductsChoose组件中已正确定义并赋值，这是计算tmp_sell的关键变量。
• 全局事件尽量少用，如果组件间是父子关系，更推荐用子组件$emit配合父组件v-on监听的方式；全局事件仅适合跨层级的组件传值场景。
• 用v-model.number可以确保输入框的值始终是数字类型，避免字符串转换导致的显示异常。

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