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

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

父组件代码：

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

子组件代码：

上述代码可以得到以下界面效果，这是我们只完成了表面工作（请忽略样式）

下面开始正题：

首先，我们要打通父子组件的隔阂，先将父组件的textVal传递给子组件，这里我们需要使用到v-mode语法，将我们先前定义好的数组内的textVal属性传递过去。

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

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

实现双向绑定

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

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

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

// 这里是父组件的script

随后进行测试

可以看到，虽然是通过循环生成的三个子组件（input），但是它们各自都实现了双向数据绑定以及数据监听，至此，效果实现，本博客仅用于开发过程中的记录以及复盘，仅供参考！