工作265:v-model实现原理 自定义组件使用v-model

v-model只是一个语法糖,等于:value+@input,真正的实现靠的还是: v-bind:绑定响应式数据,触发 input 事件并传递数据 (核心和重点)

1

其实和下面一样的

<input :value=“something” @input=“something = $event.target.value”>

1

因此,对于一个带有 v-model 的输入框组件,它应该:接收一个 value prop,触发 input 事件,并传入新值

自定义myInput组件

在页面使用

{{name}} {{othername}}

methods:{
}
}

效果
在这里插入图片描述总结:
自定义的组件内部一般包含原生的表单组件(当然非表单的组件也可以),然后给原生控件绑定事件,捕捉到原生组件的值,利用 $emit方法,触发input方法,组件监听到 input事件然后把值传入

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
text 和 textarea 元素使用 value 属性和 input 事件;
checkbox 和 radio 使用 checked 属性和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于CI框架引入CSS与JS文件

</pre>最近用了一下CI框架&#xff0c;使用到了bootstrap&#xff0c;引入CSS文件的时候一直不生效&#xff0c;琢磨这找到了原因。<p></p><p>首先&#xff0c;在根目录找到.htaccess文件&#xff0c;修改为如下内容</p><p></p><…

视图转为表

create table t as select * from view转载于:https://www.cnblogs.com/jycjy/p/8796841.html

idea中隐藏.iml文件

在创建父子工程或者聚合工程时产生的大量 .iml 文件&#xff0c;有时会对我们的操作产生干扰&#xff0c;所以&#xff0c;一般情况下&#xff0c;我们都将其隐藏掉&#xff0c;步骤如下&#xff1a; File——>settings——>Editor——>File Types——>Ignore fil…

YII2 服务器验证码不显示

<span style"font-size:18px;">最近做的一个项目上线了&#xff0c;我用YII2新搭建的后台&#xff0c;在本地以及内测地址都正常&#xff0c;上线之后验证码却没有显示&#xff0c;上网搜了一下&#xff0c;有网友说修改一下源文件就可以。</span> 查找源…

微信小程序视频弹幕效果

这次&#xff0c;和大家一起探讨下小程序视频弹幕一、按照老规矩&#xff0c;先附上gif效果图&#xff1a;二、接下来看下官方文档API对vide说明PS&#xff1a;相关属性解析&#xff1a;danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按钮 controls:是否显示视…

基于Docker搭建GitLab代码管理

关于Git、SVN的优缺点就不再重复了&#xff0c;本篇主要以实际搭建为主。 1、下载镜像文件 在命令行窗口执行如下指令&#xff0c;预计下载完成4分钟。 docker pull beginor/gitlab-ce:11.0.1-ce.0注意&#xff1a; 一定要配置镜像加速&#xff0c;不然会非常非常的慢&#x…

虚拟域名不能访问

早上遇到个问题&#xff0c;打开本地虚拟域名&#xff0c;访问报错。开始的时候报错是&#xff0c;地址不存在。后面发现是因为丢了.htaccess文件&#xff08;用的是TP框架&#xff09;&#xff0c;加上这个文件&#xff0c;内容如下 <IfModule mod_rewrite.c>Options Fo…

CentOS 7安装Hadoop 3.0.0

最近在学习大数据&#xff0c;需要安装Hadoop&#xff0c;自己弄了好久&#xff0c;最后终于弄好了。网上也有很多文章关于安装Hadoop的&#xff0c;但总会遇到一些问题&#xff0c;所以把在CentOS 7安装Hadoop 3.0.0的整个过程记录下来&#xff0c;有什么不对的地方大家可以留…

Docker中Maven私服的搭建

为何用到Maven私服&#xff1f; 在实际开发中&#xff0c;项目中可能会用到第三方的jar、内部通讯的服务接口都会打入到公司的私服中。 我们从项目实际开发来看&#xff1a; 一些无法从外部仓库下载的构件&#xff0c;例如内部的项目还能部署到私服上&#xff0c;以便供其他依赖…

博客作业03--栈和队列

1.学习总结 2.PTA实验作业 题目1&#xff1a;jmu-字符串是否对称 1设计思路 for i 1 to 字符串str结束if 栈顶元素 ! str[i] 字符串不对称输出noendfor字符串对称输出yes 2代码截图 3PTA提交列表说明 前面几处错误都是因为输入用的是getchar(),后来改用gets就对了好像是因为这…

关于微信支付报错

最近两周一直在做网站的微信支付&#xff0c;期间遇到好多个问题&#xff0c;而最坑的问题&#xff0c;应该就是一个exit引发的坑案。 其实上周微信支付就已经调通了&#xff0c;在测试环境测试&#xff0c;没有什么大的问题&#xff0c;完美。但是提交到内测环境之后&#xf…

apollo报:系统出错,请重试或联系系统负责人

说明&#xff1a;基于 docker 搭建的 apollo&#xff0c;创建项目后一直报系统出错&#xff0c;请重试或联系系统负责人错误。 项目人员列表一直空白&#xff1a; 经排查是数据库配置参数不匹配&#xff0c;由于自己的虚拟机 ip 为 192.168.10.130 注意&#xff1a;修改完需要重…

关于Trie的一些算法

最近学习了一下关于Trie的一些姿势&#xff0c;感觉很实用。 终于不用每次看到字符串判重等操作就只想到hash了 关于Trie的定义&#xff0c;来自百度百科 在计算机科学中&#xff0c;Trie&#xff0c;又称前缀树或字典树&#xff0c;是一种有序树状的数据结构&#xff0c;用于保…

使用nginx搭建https服务器

最近在研究nginx&#xff0c;整好遇到一个需求就是希望服务器与客户端之间传输内容是加密的&#xff0c;防止中间监听泄露信息&#xff0c;但是去证书服务商那边申请证书又不合算&#xff0c;因为访问服务器的都是内部人士&#xff0c;所以自己给自己颁发证书&#xff0c;忽略掉…

分布式配置中心阿波罗的搭建与客户端的应用

为了统一管理微服务配置文件&#xff0c;实现动态化刷新配置文件&#xff0c;常见的两种方式为阿波罗、SpringCloudConfig&#xff0c;关于两者主要区别是&#xff1a; 阿波罗配置文件存放在数据库中&#xff0c;SpringCloudConfig存放在Git里面 一、搭建过程 本篇主要演示阿波…