Vue3中实现父组件内复用子输入组件的独立值绑定

问题原因 #

你当前的代码里，两个<MyComponent>都绑定了同一个myText响应式变量，所以输入时所有实例都会同步这个变量的值，导致共用。要让它们独立，只需要给每个组件绑定独立的响应式变量即可。

方案1：使用独立的响应式变量 #

修改App.vue，创建两个不同的ref分别绑定到两个组件：

<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
  
// 创建两个独立的响应式变量
const myText1 = ref('')
const myText2 = ref('')
</script>

<template>
  This input capitalizes everything you enter:<br />
  <MyComponent v-model.capitalize="myText1" /><br />
  <MyComponent v-model.capitalize="myText2" />
</template>

MyComponent.vue不需要修改，保持原代码即可。

方案2：用数组管理多个实例（适合大量复用场景） #

如果需要复用多个组件，用数组来管理更方便：

<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
  
// 用数组存储多个独立值，初始可以根据需要添加空字符串
const inputValues = ref(['', ''])
</script>

<template>
  This input capitalizes everything you enter:<br />
  <MyComponent 
    v-for="(value, index) in inputValues" 
    :key="index"
    v-model.capitalize="inputValues[index]" 
  /><br />
</template>

这样后续新增组件时，只需要给inputValues数组添加新元素即可，无需单独创建变量。

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