逻辑增强系列（一）：吃透自定义组件v-model

时间：2023-03-31 23:55:22 vue.js

的使用在使用v-model之前，首先要知道v-model的用处和实际运行过程，这样便于理解，反而死记硬背语法；出于v-model的目的，您可以在表单输入、和<select>元素中使用v-model命令来创建双向数据绑定。它会根据控件类型自动选择正确的方法来更新元素。尽管它很神奇，但v-model本质上只不过是语法糖。它负责监听用户输入事件来更新数据，并对一些极端场景做一些特殊处理。v-model<inputv-model="searchText">的实际操作其实相当于<input:value="searchText"@input="searchText=$event.target.value">下面输入代码的意思是，当执行input事件，将事件的值赋值给searchText，也就是第一段代码的意思。当searchText的变量值发生变化时，其他依赖该变量值的地方也会发生变化，从而形成了一个完整的，用户输入->数据变化->用户界面变化这样的双向绑定效果。所以，v-model其实只是一个语法糖。让我们少写代码。这种语法糖在VUE中随处可见。之后，我们会经常在自定义组件中使用它，在原生元素中使用它。我们只是需要直接添加，但是在组件中使用时，除了在父组件上添加这个属性外，当然还需要子组件进行一些配合。下面是详细步骤：假设我们当前的子组件在父组件中设置v-model叫做my-input，需要链接的数据叫做msg<my-inputv-model="msg"></my-input>exportdefault{data(){return{msg:''}}}子组件中的配置首先需要接受一个名为`value`的prop，因为当父组件设置v-model，它默认会给子组件传递一个valueprop，就是这个隐藏代码：value="msg"@input="msg=arguments[0]"exportdefault{props:['value']}然后配置输入元素。对于上面隐藏代码的后半部分（将用户输入赋值给msg），我们自然不能写在父组件上。因此，需要将它移到一个真正有input元素的子组件中来完成<inputtype="text"@input="$emit('input',$event.target.value)">这里的逻辑是通过emit调用父组件的输入事件（因为父组件的输入事件已经使用v-model语法糖定义，所以可以这样调用），并将用户输入的内容作为参数传递进入input事件，巧妙的实现了为了在子组件监听用户输入，改变父组件的参数msg，这样一个比较复杂的逻辑过程！Tips：理解这部分有三个关键点：1、事件的起点是子组件上nativeinput的oninput事件；2.这里父组件的需求是希望v-model绑定的input可以改变变量值，但是本身并不能直接获取用户的输入，所以需要调用emit方法来通过子组件传递参数，告诉它用户输入了什么；3.v-model本身的语法糖是针对原生表单控件的，因为在原生表单控件上，用户输入和提供的变量在同一个作用域内，所以可以access，这样一口气完成了整个过程，搞定了一个v-model；但是当我们使用包装的表单控件时，例如本文中的my-input控件，就会出现作用域问题。在这里，在父组件中，我们已经定义了需要由v-model为我们更改的变量，但是我们无法监视用户输入。用户输入的范围在哪里？答案在子组件，子组件需要如何让父组件知道？答案是emit函数；我们来看看整个过程中父子组件分担的工作：父组件：绑定数据变量，通过hidden定义自己的输入事件（给数据变量赋值）v-model代码，但缺少事件参数；child组件：监听用户输入，emit触发父组件的input事件并将用户输入作为参数传入，以便父组件为数据变量赋值</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="基于微信云开发的小程序客服消息推送" href="/webqianduan/215788.html">基于微信云开发的小程序客服消息推送</a> </div> <div class="prev">下一篇：<a title="2022年了，还不懂PWA？教你一个VuePress博客如何快速兼容PWA" href="/webqianduan/215790.html">2022年了，还不懂PWA？教你一个VuePress博客如何快速兼容PWA</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>逻辑增强系列（一）：吃透自定义组件v-model相关文章</code></div> <ul> <li><a href="/kejifunen/368054.html" target="_blank" title="所有系列均已正式打折， 6.6万元起售价的哈弗M6值得选择吗">所有系列均已正式打折， 6.6万元起售价的哈弗M6值得选择吗</a></li> <li><a href="/kejifunen/367907.html" target="_blank" title="不一样的智能产品！ golife系列产品亮相上海">不一样的智能产品！ golife系列产品亮相上海</a></li> <li><a href="/kejifunen/367819.html" target="_blank" title="除了用眼镜，增强现实还可以这样玩">除了用眼镜，增强现实还可以这样玩</a></li> <li><a href="/kejifunen/367743.html" target="_blank" title="化繁为简，一键搞定华为P20系列高手！ ">化繁为简，一键搞定华为P20系列高手！ </a></li> <li><a href="/kejifunen/367552.html" target="_blank" title="海信全系列激光产品亮相2018年IFA展会，将在15个国家全">海信全系列激光产品亮相2018年IFA展会，将在15个国家全</a></li> <li><a href="/kejifunen/367548.html" target="_blank" title="苹果的设计理念和交互逻辑与谷歌有何不同？ ">苹果的设计理念和交互逻辑与谷歌有何不同？ </a></li> <li><a href="/kejifunen/367397.html" target="_blank" title="差异化挑战消费升级，国美独家推出格力全功能舒适系列空调">差异化挑战消费升级，国美独家推出格力全功能舒适系列空调</a></li> <li><a href="/kejifunen/367087.html" target="_blank" title="沉浸式体验世界杯赛事海信2018年世界杯指定电视U7系列发">沉浸式体验世界杯赛事海信2018年世界杯指定电视U7系列发</a></li> <li><a href="/kejifunen/366589.html" target="_blank" title="ZIDOO X20系列芯片Realtek1296，到底有多强">ZIDOO X20系列芯片Realtek1296，到底有多强</a></li> <li><a href="/kejifunen/366532.html" target="_blank" title="Facebook的增强现实战略从手机开始，不等智能眼镜">Facebook的增强现实战略从手机开始，不等智能眼镜</a></li> <li><a href="/kejifunen/366434.html" target="_blank" title="Kensington 扩展坞系列！连接高效的移动办公室">Kensington 扩展坞系列！连接高效的移动办公室</a></li> <li><a href="/kejifunen/366385.html" target="_blank" title="增强稳定性！ TPCast发布升级版无线适配器">增强稳定性！ TPCast发布升级版无线适配器</a></li> <li><a href="/kejifunen/366358.html" target="_blank" title="浪琴表推出Concas系列V.H.P. GMT光敏设置腕表！">浪琴表推出Concas系列V.H.P. GMT光敏设置腕表！</a></li> <li><a href="/kejifunen/366281.html" target="_blank" title="全息图像和手势控制离我们并不遥远， Meta 2增强现实眼镜">全息图像和手势控制离我们并不遥远， Meta 2增强现实眼镜</a></li> <li><a href="/kejifunen/366048.html" target="_blank" title="发布首月国内销量突破200万台，讲解华为nova3系列受欢迎">发布首月国内销量突破200万台，讲解华为nova3系列受欢迎</a></li> <li><a href="/kejifunen/365919.html" target="_blank" title="快速回顾图片！ HUAWEI WATCH星月系列手表镶嵌宝石">快速回顾图片！ HUAWEI WATCH星月系列手表镶嵌宝石</a></li> <li><a href="/kejifunen/365836.html" target="_blank" title="Fossil Q系列四款智能手表发布传统与科技">Fossil Q系列四款智能手表发布传统与科技</a></li> <li><a href="/kejifunen/365792.html" target="_blank" title="巨头对AR和增强现实产业链的重视程度或超市场预期">巨头对AR和增强现实产业链的重视程度或超市场预期</a></li> <li><a href="/kejifunen/365762.html" target="_blank" title="可穿戴技术行业分析系列三！可穿戴技术的商业应用">可穿戴技术行业分析系列三！可穿戴技术的商业应用</a></li> <li><a href="/kejifunen/365679.html" target="_blank" title="增强现实（AR）行业分析报告替代手机的下一代计算平台">增强现实（AR）行业分析报告替代手机的下一代计算平台</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/371146.html" title="华为nova3系列领跑破纪录，国内首月销量突破200万部" target="_blank">华为nova3系列领跑破纪录，国内首月销量突破200万部</a></li> <li><em>2</em><a href="/kejifunen/370958.html" title="库克再次支持增强现实技术！人与人的接触是无可替代的" target="_blank">库克再次支持增强现实技术！人与人的接触是无可替代的</a></li> <li><em>3</em><a href="/kejifunen/370899.html" title="亚马逊将推出即插即用智能音箱增强型低音炮Amazon Ech" target="_blank">亚马逊将推出即插即用智能音箱增强型低音炮Amazon Ech</a></li> <li><em>4</em><a href="/kejifunen/370862.html" title="微珠让您度过一个顺畅的夏天，飞利浦7000系列电动剃须刀专为" target="_blank">微珠让您度过一个顺畅的夏天，飞利浦7000系列电动剃须刀专为</a></li> <li><em>5</em><a href="/kejifunen/370856.html" title="智能办公商选柯尼卡美能达bizhub 658e系列新款黑白多" target="_blank">智能办公商选柯尼卡美能达bizhub 658e系列新款黑白多</a></li> <li><em>6</em><a href="/kejifunen/370638.html" title="种植圣诞礼物！支持eSIM 1双终端的HUAWEIWATCH" target="_blank">种植圣诞礼物！支持eSIM 1双终端的HUAWEIWATCH</a></li> <li><em>7</em><a href="/kejifunen/370591.html" title="运动手表、运动相机，智能穿戴的未来在哪里？ tesa全新热熔" target="_blank">运动手表、运动相机，智能穿戴的未来在哪里？ tesa全新热熔</a></li> <li><em>8</em><a href="/kejifunen/370488.html" title="虚拟现实可以照进现实和AR增强体验" target="_blank">虚拟现实可以照进现实和AR增强体验</a></li> <li><em>9</em><a href="/kejifunen/370325.html" title="从颜值开始，忠于品质——兄弟QL-1100系列标签打印机新品" target="_blank">从颜值开始，忠于品质——兄弟QL-1100系列标签打印机新品</a></li> <li><em>10</em><a href="/kejifunen/370297.html" title="销量惨淡，Jawbone Up系列运动手环面临停产？ " target="_blank">销量惨淡，Jawbone Up系列运动手环面临停产？ </a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/370208.html" title="可穿戴技术行业分析系列四！三个有前途的行业" target="_blank">可穿戴技术行业分析系列四！三个有前途的行业</a></li> <li><em>2</em><a href="/kejifunen/370205.html" title="智能穿戴酷思维！先从华为荣耀系列开始吧" target="_blank">智能穿戴酷思维！先从华为荣耀系列开始吧</a></li> <li><em>3</em><a href="/kejifunen/370114.html" title="三星又曝无人机专利服务Galaxy系列手机？ " target="_blank">三星又曝无人机专利服务Galaxy系列手机？ </a></li> <li><em>4</em><a href="/kejifunen/370113.html" title="智能语音设备因其简单直接的交互逻辑，或将更受老年人欢迎 " target="_blank">智能语音设备因其简单直接的交互逻辑，或将更受老年人欢迎 </a></li> <li><em>5</em><a href="/kejifunen/369814.html" title="美国DARPA开发军用可穿戴视图增强显示器" target="_blank">美国DARPA开发军用可穿戴视图增强显示器</a></li> <li><em>6</em><a href="/kejifunen/369726.html" title="可穿戴外骨骼来了，它可以有效增强人类腿部的力量，体力劳动者的" target="_blank">可穿戴外骨骼来了，它可以有效增强人类腿部的力量，体力劳动者的</a></li> <li><em>7</em><a href="/kejifunen/369666.html" title="谷歌将把失败的谷歌眼镜嵌入增强现实" target="_blank">谷歌将把失败的谷歌眼镜嵌入增强现实</a></li> <li><em>8</em><a href="/kejifunen/369529.html" title="【爆料】继Project Tango手机之后，联想可能推出增" target="_blank">【爆料】继Project Tango手机之后，联想可能推出增</a></li> <li><em>9</em><a href="/kejifunen/369503.html" title="虹口区创客服务中心系列活动——智能硬件与科技创新路演成功举办" target="_blank">虹口区创客服务中心系列活动——智能硬件与科技创新路演成功举办</a></li> <li><em>10</em><a href="/kejifunen/369469.html" title="今日头条英特尔成立联合实验室，利用AI增强内容创作" target="_blank">今日头条英特尔成立联合实验室，利用AI增强内容创作</a></li> <li><em>11</em><a href="/kejifunen/369411.html" title="深度评测HUAWEI WATCH星月系列科技与时尚的全美式" target="_blank">深度评测HUAWEI WATCH星月系列科技与时尚的全美式</a></li> <li><em>12</em><a href="/kejifunen/369364.html" title="谷歌也打算生产增强现实头盔吗？ " target="_blank">谷歌也打算生产增强现实头盔吗？ </a></li> <li><em>13</em><a href="/kejifunen/369028.html" title="墨照稳定器全系列产品亮相BIRTV2018！从现在开始你我一" target="_blank">墨照稳定器全系列产品亮相BIRTV2018！从现在开始你我一</a></li> <li><em>14</em><a href="/kejifunen/368809.html" title="360发布X1系列儿童手表！支持视频通话" target="_blank">360发布X1系列儿童手表！支持视频通话</a></li> <li><em>15</em><a href="/kejifunen/368734.html" title="索尼正式发布国行版“华帝”系列A9F-Z9F旗舰电视，199" target="_blank">索尼正式发布国行版“华帝”系列A9F-Z9F旗舰电视，199</a></li> <li><em>16</em><a href="/kejifunen/368661.html" title="增强型AI模块化莱尼与大众签约" target="_blank">增强型AI模块化莱尼与大众签约</a></li> <li><em>17</em><a href="/kejifunen/368634.html" title="Epson BT-300智能眼镜评测堪称AR增强现实眼镜的未" target="_blank">Epson BT-300智能眼镜评测堪称AR增强现实眼镜的未</a></li> <li><em>18</em><a href="/kejifunen/368592.html" title="IMX380+防抖，魅族16th系列摄影魅力何在？ " target="_blank">IMX380+防抖，魅族16th系列摄影魅力何在？ </a></li> <li><em>19</em><a href="/kejifunen/368147.html" title="智能手表市场分析！瓶颈与必胜逻辑" target="_blank">智能手表市场分析！瓶颈与必胜逻辑</a></li> <li><em>20</em><a href="/kejifunen/368125.html" title="华为发布Band 2系列智能手环" target="_blank">华为发布Band 2系列智能手环</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div>   </body> </html>