Vue3中如何将多个子输入框单向绑定到主输入框？

问题根源 #

你这代码的问题出在两点：

1. 初始化子输入框的响应式变量时，错把taxDefault这个ref对象直接传给了ref()，导致子变量的内部值指向了同一个ref对象，而非具体数值。修改子输入框时会意外改掉taxDefault的value，结果所有输入框跟着联动。
2. 没监听主输入框的变化，没法实现主框修改后同步所有子框的需求。

正确实现方案 #

第一步：修正变量初始化逻辑 #

子变量的初始值要取taxDefault.value（也就是具体的数值13），不能直接传入ref对象：

<template>
  <input
    id="tax_0"
    max="100"
    min="0"
    type="number"
    v-model="taxPercentage0"
  />
  <input
    id="tax_1"
    max="100"
    min="0"
    type="number"
    v-model="taxPercentage1"
  />
  <input
    id="tax_2"
    max="100"
    min="0"
    type="number"
    v-model="taxPercentage2"
  />
</template>

<script setup>
import { ref, watch } from 'vue'
const taxDefault = ref(13)

// 用taxDefault的具体数值初始化子变量
const taxPercentage0 = ref(taxDefault.value)
const taxPercentage1 = ref(taxDefault.value)
const taxPercentage2 = ref(taxDefault.value)
</script>

第二步：监听主框变化，同步子框 #

用Vue的watch监听taxDefault，只要它的值改变，就把所有子变量同步为新的主框值：

// 新增监听逻辑
watch(taxDefault, (newValue) => {
  taxPercentage0.value = newValue
  taxPercentage1.value = newValue
  taxPercentage2.value = newValue
})

完整代码 #

<template>
  <!-- 主输入框 -->
  <input
    id="tax_master"
    max="100"
    min="0"
    type="number"
    v-model="taxDefault"
  />

  <!-- 子输入框 -->
  <input
    id="tax_0"
    max="100"
    min="0"
    type="number"
    v-model="taxPercentage0"
  />
  <input
    id="tax_1"
    max="100"
    min="0"
    type="number"
    v-model="taxPercentage1"
  />
  <input
    id="tax_2"
    max="100"
    min="0"
    type="number"
    v-model="taxPercentage2"
  />
</template>

<script setup>
import { ref, watch } from 'vue'

const taxDefault = ref(13)
// 正确初始化子变量
const taxPercentage0 = ref(taxDefault.value)
const taxPercentage1 = ref(taxDefault.value)
const taxPercentage2 = ref(taxDefault.value)

// 监听主输入框变化，同步所有子输入框
watch(taxDefault, (newVal) => {
  taxPercentage0.value = newVal
  taxPercentage1.value = newVal
  taxPercentage2.value = newVal
})
</script>

为啥之前用:value没解决？ #

如果之前试了用:value绑定taxDefault，但没处理输入事件，子框会变成只读状态；要是绑定了@input修改子变量，但子变量初始化还是错用了taxDefault对象，改子框的时候依然会影响主变量。必须先修正初始化逻辑，再加上监听，才能达到预期效果：页面加载时所有框显示13，主框修改同步所有子框，子框修改不影响主框和其他子框。

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