填坑记录之Vue中v-model与:model区别

傷城~ 2023-07-05 14:47 23阅读 0赞

初做vue项目中遇到这个问题，记录一下。

**源代码：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 1]  
打算做的表单验证功能。结果发现在验证的过程中`username`规则的第一条正确了却一直通过不了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 2]  
通过控制台得知长度一直为1。原来是拿不到数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 3]  
`v-model`通常用于input的双向数据绑定,它并不会向子组件传递数据。

`:model`是`v-bind:model`的缩写，是绑定自定义属性.它只是将父组件的数据传递给子组件，并没有实现父组件和子组件数据之间的双向绑定。

所以在`form`表单标签中，并没有向子组件传递数据，所以在`input`标签中获取不到数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 4]

正确的做法应该将form标签中`v-model`改为 `:model`，这样在子组件中才可以获取到数据。  
![在这里插入图片描述][20200215204207591.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200215202605620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200215202724239.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200215203036807.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200215203144150.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200215204046489.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70
[20200215204207591.png]: https://img-blog.csdnimg.cn/20200215204207591.png