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

技术分享 3年前 (2022-10-11) 0 999+

观前须知：本人演示使用的input是自己手敲的，如果使用的是element-ui等表单组建的input框请选择性参考，不保证我的方法对你们也完全有效。

父组件代码：

这里我的MiniInput是以组件形式引入的父页面 (这里只贴关键代码)

<template> 	<div>     <MiniInput  			v-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 --> <MiniInput     v-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="textVal" class="mini-input" type="text" />   </div> </template> <script setup lang="ts">   // defineProps 用于接收父组件传递过来的参数   defineProps<{     textVal: string   }>() </script>

实现双向绑定

但是此时我们会发现，到目前为止我们也仅仅只是接受了父组件传递过来的参数，此时我们去输入框改变内容时，并不会同时改变父组件中的值，那么此时我们就要想办法实现数据流的 双向绑定

要实现双向数据响应，首先子组件要使用 defineEmits 接受父组件传递过来的 textVal 的 update 函数,随后我们给输入框添加一个input事件，目的是监听输入内容随后改变父组件中的对应属性。

<template>   <div class="from__input__mini">     <span class="mini-title">       <slot name="miniTitle"></slot>     </span>     <input :value="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 HTMLInputElement     emit('update:textVal', target.value)   } </script>

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

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

随后进行测试