vue 自定义组件使用v-model
<input v-model="something">
v-model指令其实是下面的语法糖包装而成:
<input:value="something"@:input="something = $event.target.value">
在一个组件上使用 v-model 时,会简化为:
<custom-input:value="something"@input="value => { something = value }"> </custom-input>
因此,对于一个带有 v-model
的组件,它应该如下:
- 接收一个
value
prop - 触发
input
事件,并传入新值
利用 $emit 触发 input 事件:
this.$emit('input', value);
组件1:
Vue.component('my-component', {template: `<div><input type="text" :value="currentValue" @input="handleInput"/></div>`, computed:{currentValue:function () {return this.value}},props: ['value'], //接收一个 value prop methods: {handleInput(event) {var value = event.target.value;this.$emit('input', value); //触发 input 事件,并传入新值 }} });
上面是将prop属性绑定到data里,以便修改 prop 数据(Vue不允许直接修改prop属性的值)#查看原理#
组件2:
Vue.component("my-counter", {template: `<div><h1>{{value}}</h1><button @click="plus">+</button><button @click="minu">-</button></div>`, props: {value: Number //接收一个 value prop },data: function() {return {val: this.value}},methods: {plus() {this.val = this.val + 1this.$emit('input', this.val) //触发 input 事件,并传入新值 },minu() {if(this.val>0){this.val = this.val-1this.$emit('input', this.val) //触发 input 事件,并传入新值 }}} });
查看在线例子
参考文档:https://vuejs.org/v2/guide/components.html
转载于:https://www.cnblogs.com/bldf/p/6645225.html
vue 自定义组件使用v-model相关推荐
- Vue如何自定义组件?超详细Vue自定义组件指南!使用自定义组件减少重复造轮子! ∠( °ω°)/ 前端知识
文章目录 使用意义 基础使用 给组件添加属性 传递事件 自定义组件的v-model 剖析v-model原理 使用示例 插槽 使用意义 有时候一组HTML代码可能会在多出使用(比如页眉页脚).如果我们把 ...
- vue 自定义组件双向数据绑定
文章目录 序 属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定 总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
- vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口 学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
- vue自定义组件及定义插槽
vue自定义组件绑定事件: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
- vue自定义组件,插槽,自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件 语法 Vue.component('自定义组件名', {pr ...
- vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreat ...
- vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
- Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装 二. 创建vue组件 三.使用 四.效果图 一.js-xlsx 组件安装 npm install xlsx --savenpm in ...
- Vue自定义组件之时间跨度选择器
时间跨度选择器 该组件是个时间跨度选择器. 基于 vue自定义组件之选择器 和 Vue自定义组件之日期时间范围选择器 点击选框,下拉列表中有四个选项,点击自定义时间,后边会出现 日期时间范围选择 代码 ...
- Vue自定义组件npm上传私服,且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用 安装镜像源管理工具nrm 发布自定义组件到公司私服 若未下载nrm源管理工具直接使用npm设置私服地址也可以 以下步骤都是基于npm命令 从私服下 ...
最新文章
- 只能在堆或只能在栈上分配内存的类
- ubuntu|利用system来新建文件夹
- cocoapods 终极方案
- hook java android_Android Hook Java的的一個改進版本
- laravel框架中文手册_node.js 后端框架star 排名 2020年11月更新,fastify 超 egg
- python数值计算
- 删除git中缓存的用户名和密码
- BZOJ 2956 模积和
- 用计算机的知识服务社会,科研育人案例-董立红
- 大话数据结构读书笔记系列(七)图
- ArcGIS Server Help 之 Geodatabase and ArcSDE 学习笔记
- 说说视频编码格式、视频码率、视频帧率、分辨率的概念
- mac视频播放器哪个最好用?不妨试试OmniPlayer Pro mac中文版吧
- 【服务器管理之远程桌面】
- 实例总结C#反射基础知识
- html输入QQ自动获取QQ头像,代码实现WordPress评论框输入QQ号码自动获取QQ头像和昵称...
- 2021年全球自动浓缩咖啡机行业调研及趋势分析报告
- 5.Fabric v2.0 java-sdk 根据TXID查询区块并从区块解析数据
- android xposed miui9,vxposed在小米-安卓9上闪退
- cocos creator麻将教程系列(四)—— 达达麻将客户端初始化流程
热门文章
- 调用webserver时出现:请求因 HTTP 状态 401 失败: Unauthorized。
- Spring处理log4j
- 【日常】Mac安装Homebrew
- 三坐标测量圆直径_多台三坐标测量机联动测量方法的研究
- fabric 启动peer_Hyperledger Fabric Peer 常用命令总结
- Jenkins分布式构建和部署(master-slave)
- import 导入和from导入的区别
- 以太坊2.0客户端Lighthouse发布v1.3.0版本,为高优先级建议立即更新
- TokenInsight:反映区块链行业整体表现的TI指数较昨日同期下跌1.54%
- SUSHI区块奖励将根据此前提案在3月降至每区块40枚