Vue组件变量无法传递至QuoteAdd.vue页面问题求助

核心问题 #

你当前的写法存在三个关键错误：

1. 未正确监听$root事件：在<input>标签上用@tmp_sell="tmp_sell"完全无效，因为自定义事件tmp_sell是通过$root触发的，必须在组件生命周期钩子中用$on监听，而非绑定在DOM标签上。
2. data选项写法错误：Vue的data必须返回一个对象，你当前的写法不符合规范，会导致数据无法实现响应式更新。
3. 输入框绑定方式错误：要让输入框显示变量值，应该用v-model做双向绑定，而非自定义属性tmp_sell="tmp_sell"。

具体修改步骤 #

1. 修正QuoteAdd.vue的data选项

data() {
  return {
    tmp_sell: 0
  }
}

2. 在QuoteAdd.vue中监听$root事件

在组件的created钩子中添加事件监听，接收传递过来的tmp_sell值：

created() {
  // 监听$root上的tmp_sell事件，同步更新本地变量
  this.$root.$on('tmp_sell', (newValue) => {
    this.tmp_sell = newValue;
  });
}

3. 修正输入框的绑定方式

用v-model绑定tmp_sell，确保输入框能同步显示变量值：

<p>{{tmp_sell}}</p>
<input type="number" ref="q_subtotal" placeholder="Subtotal" v-model="tmp_sell" id="q_subtotal" />

额外注意事项

• 确保组件中的tmp_sell已在自身data中声明初始值tmp_sell: 0，否则第一次数值相加会得到NaN。
• 检查组件代码中的d.data().p_sell，确认d是合法的数据源（比如Firestore文档实例），能正常获取到p_sell的数值。

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