自定义组件v-model记录
在其他一些框架语言中并没有v-model这么强大的指令,这么方便。在react使用value,onchange的方式实现双向绑定明显麻烦很多。所以在学习vue的基础语言语法相对其他来说确实简单了很多了。
在写这篇文章前,因为业务需要自定义组件的封装,就去看了这个关于v-model的自定义组件的实现,我们先看看官方文档的说明。
从官方和技术文章中我们可以知道,v-model是v-bind以及v-on配合使用的语法糖,举个例子
<input v-model="value"/> <input v-bind:value="value" v-on:input="value=$event.target.value">
这两种方式实现是等价的
现在我们已经了解了v-model是什么东西了,我们除了能在表单组件上实现v-model,能不能在自定义组件实现双向绑定呢呢??
答案是可以的。
vue官方文档的v-model的说明:一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。
也就是说 我们在在自定义组件上使用v-model 的时候 也是 v-bind:value , v-on:input="value=$event.target.value"
这是默认的v-model的形式,我们也可以通过在子组件中的 model上自定义他们的value和event,接下来我们看代码。
//子组件 <template> <div> <input type="text" v-model="checkData"> </div> </template> <script> export default { props: { value: { default: '' } }, computed: { inputData: { get () { return this.value }, set (val) { this.$emit('checked', val) //这个是computed的get set不是我们的重点, 简单来说就是 得值和改值时触发的事件 } } }, model: { prop: 'value', event: 'checked' // 这里是我们通过修改默认的value、 input事件 改成我们要使用 checked } } </script> // 父组件 <template> <div> {{msg}} <a-input v-model="msg"></a-input> </div> </template> <script> import Input from './Input.vue' export default { data () { return { msg: '12321' } }, methods: { }, components: { aInput: Input } } </script> <style lang="scss" scoped> </style>
在上面中我们可以看到v-model在自定义组件的实现。 通过$emit的方式,这样是我们很常见的组件通信、我们通过这样的方式传值。所以在这里我们就修改的值传到父组件去修改了。 我们这里是用computed去实现也是可以的,我们也可以用很多实现的方法,当我们修改的时候,比如watch去触发,核心的还是$emit 将我们想要传的值传给父组件, 还有就是model里的event设置跟$emit对应即可。
这两段代码简单实现了自定义组件的v-model,接下来我们就可以愉快的使用自定义组件的v-model啦
最后还有个.sync修饰符比较类似这个v-model有兴趣的小伙伴可以去看看哦!!!
编者第一次写,如果有不足之处欢迎指正!如果有上面问题也欢迎提问哦
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
物联网将如何继续改变制造业
云栖号:https://www.aliyun.com/#module-yedOfott8第一手的上云资讯,不同行业精选的上云企业案例库,基于众多成功案例萃取而成的最佳实践,助力您上云决策! 来源:物联之家网(iothome.com) 如今,智能的东西已经从奢侈品变成了每个人的必需品,并且具有智能接入和无线连接的产品比五年前更为普遍。根据一份报告显示,仅在美国,就有79%的消费者在家中至少拥有一台智能设备,而另有45%的用户可以在工作场所、学校和大学中使用各种智能设备。 物联网,除了改变我们的日常生活之外,也给我们今天的商业运作带来了巨大的变革。通过使用无线连接,许多组织有能力与日常物品连接,并利用技术开发新的前景,并增强其工作潜力。 什么是物联网? 物联网是指连接到互联网并在彼此之间收集和共享数据的物理对象网络。它们具有监测周围数据,并将数据从一台设备传输到另一台设备的能力,而无需任何人工干预。物联网有望实现全新的自动化水平,从而可以逐步消除各个行业和制造领域的大多数手动作业。 在未来十年内,将在多个行业中运行超过350亿个物联网设备,经济价值飙升至5600亿美元,创历史新高。 物联网...
- 下一篇
使用Proguard混淆Spring Boot项目代码
项目中需要对代码进行混淆处理,由于项目是标准的maven项目,便使用了proguard-maven-plugin来自动化混淆过程,但是在使用过程中也不免踩到了一些坑,网上也很少有提及,在此记录一下。 踩过的坑 spring bean名称冲突问题 默认proguard混淆后的类名类似a.class,b.class,但是不同包路径下类名可能发生重名,在spring中默认会把类名作为bean的名称,导致会报spring bean名称冲突的问题,可以通过重新实现BeanNameGenerator接口来解决: @SpringBootApplication @ComponentScan("com.abc.def") public class Application { public static void main(String[] args) { new SpringApplicationBuilder(Application.class) .beanNameGenerator(new CustomBeanNameGenerator()) .run(args); } private static...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- 设置Eclipse缩进为4个空格,增强代码规范
- Mario游戏-低调大师作品
- MySQL8.0.19开启GTID主从同步CentOS8
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS8编译安装MySQL8.0.19
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2整合Redis,开启缓存,提高访问速度