Vu3.x如何给v-for循环出来的输入框绑定v-mode的值，以及实现父子组件传值、双向绑定
观前须知：本人演示使用的input是自己手敲的，如果使用的是element-ui等表单组建的input框请选择性参考，不保证我的方法对你们也完全有效。
父组件代码：
这里我的MiniInput是以组件形式引入的父页面 (这里只贴关键代码)
{{ item.name }}
子组件代码：
上述代码可以得到以下界面效果，这是我们只完成了表面工作（请忽略样式）
下面开始正题：
首先，我们要打通父子组件的隔阂，先将父组件的textVal传递给子组件，这里我们需要使用到v-mode语法，将我们先前定义好的数组内的textVal属性传递过去。
{{ item.name }}
随后我们来到子组件，为接收父组件传递过来的值做准备
此时我们就可以给子组件绑定父组件传递过来的参数了
实现双向绑定
但是此时我们会发现，到目前为止我们也仅仅只是接受了父组件传递过来的参数，此时我们去输入框改变内容时，并不会同时改变父组件中的值，那么此时我们就要想办法实现数据流的 双向绑定
要实现双向数据响应，首先子组件要使用 defineEmits 接受父组件传递过来的 textVal 的 update 函数,随后我们给输入框添加一个input事件，目的是监听输入内容随后改变父组件中的对应属性。
这时我们就可以回到父组件中,为父组件的数组添加一个监听事件：
// 这里是父组件的script
随后进行测试
可以看到，虽然是通过循环生成的三个子组件（input），但是它们各自都实现了双向数据绑定以及数据监听，至此，效果实现，本博客仅用于开发过程中的记录以及复盘，仅供参考！
THE END
二维码