Vue中如何通过props传递tmp_sell到视图并绑定至q_subtotal输入框？

你当前的问题是：父组件通过choosenProductSell方法更新tmp_sell变量，子组件已声明props: ['tmp_sell']接收，但尝试用@tmp_sell="getTmpSell"绑定事件的方式无效，需要将tmp_sell绑定到id为q_subtotal的输入框中。

核心问题说明 #

@是Vue的事件监听指令，而props是父向子传递数据的属性，不能用@tmp_sell来监听props的变化。下面提供两种可行的解决方案：

方案一：直接单向绑定到输入框 #

如果仅需要将tmp_sell的值同步到输入框和<p>标签，直接使用Vue的插值语法和属性绑定即可：

子组件代码：

<p>{{ tmp_sell }}</p>
<input ref="q_subtotal" placeholder="Subtotal" :value="tmp_sell" id="q_subtotal" />

export default {
  props: ['tmp_sell']
}

• <p>标签用{{ tmp_sell }}直接插值显示值
• 输入框用:value="tmp_sell"（v-bind:value的简写）单向绑定props的值

方案二：监听props变化并执行自定义逻辑 #

如果需要在tmp_sell变化时执行getTmpSell方法做额外处理，使用Vue的watch监听props的变化：

子组件代码：

<p>{{ tmp_sell }}</p>
<input ref="q_subtotal" placeholder="Subtotal" id="q_subtotal" />

export default {
  props: ['tmp_sell'],
  watch: {
    // 监听tmp_sell的变化
    tmp_sell(newValue) {
      this.getTmpSell(newValue);
    }
  },
  methods: {
    getTmpSell(val) {
      // 这里可以添加自定义逻辑，比如更新输入框值
      this.$refs.q_subtotal.value = val;
    }
  }
}

父组件关键检查 #

确保父组件在使用子组件时，正确通过props传递tmp_sell：

<!-- 父组件模板中引入子组件 -->
<YourChildComponent :tmp_sell="tmp_sell" />

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