Vu3.x如何给v-for循环出来的输入框绑定v-mode的值，以及实现父子组件传值、双向绑定 _生活百科

观前须知：本人演示使用的input是自己手敲的，如果使用的是element-ui等表单组建的input框请选择性参考，不保证我的方法对你们也完全有效。
父组件代码：这里我的MiniInput是以组件形式引入的父页面 (这里只贴关键代码)
<template> <div><MiniInputv-for="item in titleArray":key="item.id"><template #miniTitle> {{ item.name }} </template></MiniInput></div></template><script setup lang="ts">import { Ref, ref } from 'vue'import MiniInput from '../components/MiniInput.vue'//用ref包裹数组，方便后期实现双向绑定const titleArray: Ref<Array<TitleArray>> = ref([{name: 'Exclude content',id: 1231,textVal: ''},{name: 'Federated content',id: 1232,textVal: ''},{name: 'Optional retrieval',id: 1233,textVal: ''},])</script>子组件代码：<template><div class="from__input__mini"><span class="mini-title"><slot name="miniTitle"></slot></span><input class="mini-input" type="text" /></div></template><script setup lang="ts"></script>上述代码可以得到以下界面效果，这是我们只完成了表面工作（请忽略样式）

文章插图
下面开始正题：首先，我们要打通父子组件的隔阂，先将父组件的textVal传递给子组件，这里我们需要使用到v-mode语法，将我们先前定义好的数组内的textVal属性传递过去。

<!-- 下面新增了一行 v-mode --><MiniInputv-model:textVal="item.textVal"v-for="item in titleArray":key="item.id" ><template #miniTitle> {{ item.name }} </template>	</MiniInput>

随后我们来到子组件，为接收父组件传递过来的值做准备

<script setup lang="ts">// defineProps 用于接收父组件传递过来的参数defineProps<{textVal: string}>()</script>

此时我们就可以给子组件绑定父组件传递过来的参数了

<template><div class="from__input__mini"><span class="mini-title"><slot name="miniTitle"></slot></span><input :value="https://www.huyubaike.com/biancheng/textVal" class="mini-input" type="text" /></div></template><script setup lang="ts">// defineProps 用于接收父组件传递过来的参数defineProps<{textVal: string}>()</script>

实现双向绑定【Vu3.x如何给v-for循环出来的输入框绑定v-mode的值，以及实现父子组件传值、双向绑定】但是此时我们会发现，到目前为止我们也仅仅只是接受了父组件传递过来的参数，此时我们去输入框改变内容时，并不会同时改变父组件中的值，那么此时我们就要想办法实现数据流的双向绑定
要实现双向数据响应，首先子组件要使用 defineEmits 接受父组件传递过来的 textVal 的 update 函数,随后我们给输入框添加一个input事件，目的是监听输入内容随后改变父组件中的对应属性。

<template><div class="from__input__mini"><span class="mini-title"><slot name="miniTitle"></slot></span><input :value="https://www.huyubaike.com/biancheng/textVal" @input="changeText" class="mini-input" type="text" /></div></template><script setup lang="ts">// defineProps 用于接收父组件传递过来的参数defineProps<{textVal: string}>()// 要实现双向数据响应要使用 defineEmits 接受父组件传递过来的 textVal 的 update函数const emit = defineEmits(['update:textVal'])// 输入框input事件const changeText = (e: Event) => {// 这里因为ts自动类型推断会把变量推断为EventTarget，导致没办法读取到.value属性，所以要进行一个类型断言const target = e.target as HTMLInputElementemit('update:textVal', target.value)}</script>

这时我们就可以回到父组件中,为父组件的数组添加一个监听事件：

// 这里是父组件的script<script setup lang="ts">import { Ref, ref, watch } from 'vue'.........// 监听数组watchtitleArray,() => {console.log('数组变化了')},{deep: true})</script>

随后进行测试