moel vue 自定义v_vue组件,自定义v-model方法

在使用my-component组件时,为了实现双向绑定。

Vue.component('my-component', {

props: {

obj: Object,

},

model: {

prop: 'obj',

event: 'change'

},

methods: {

onchange: function() {

this.$emit('change', this.obj);

}

}

});

上面代码中

1.props对象中,需要定义一个能够从外部传入的变量,这里我定义了一个obj。这样就可以用下面这行代码进行传递值

2.为了能够使用v-model语法糖,我们定义了model对象。model对象包含两个属性,一个是prop,一个是event。prop默认是value,event默认是input,我们这里写model是为了改变默认的东西,使用我们自己定义的变量。写好之后就可以用下面这行代码了。

3.虽然可以这么用,但还是不能从子组件传递数据到外部。因为change事件并没有被触发。这个change事件是我自定义的,所以这里需要写一个方法onchange。方法名是次要的,主要的是里面的那行代码。

this.$emit('change', this.obj);

这行两个参数,第一个是事件名,和model里的event属性的值要一样。第二个参数是改变的值。写第二个变量,才能改变外部的数据,实现双向绑定的功能。

文笔不行,没办法表达出清晰的思路,贴上早上翻阅的一些有用的链接,以供参考。

参考:

https://jsfiddle.net/yyx990803/58kxs8tj/

https://github.com/vuejs/vue/issues/4373

http://lizhihua.me/2016/10/31/vue/component_v-model/

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

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

相关文章

python面向对象类创建人物类包含姓名、职业_python面向对象类

面向对象变成介绍面向过程编程核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么东西。主要应用在一旦完成很少修改的地方,如linux内核、git、apache服务器等优…

基于java Springmvc+mybatis 电影院售票管理系统设计和实现以及文档

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 临近学期结束&#xff…

基于java SSM校园兼职平台系统设计和实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 临近学期结束&#xff…

printdocument python_python学习笔记之wxpython打印预览

主要学习wxPython in action 和Demo程序,做点学习笔记wxPython 通过使用设备上下文和绘制操作来实现打印,wxPython中实现打印的一个重要的类:wx.PrintOut它管理实际的图片部分。打印输出实例可以由一个代表打印机的wx.Printer对象或用于打印预…

基于Java SSM springboot健身管理系统设计和实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 临近学期结束&#xff…

输入法画面_仙剑奇侠传X百度输入法联名纪念版皮肤今日上线

听说我们的键盘里藏着属于你的独家记忆值#仙剑25周年#之际百度输入法联名《仙剑奇侠传》 特别推出官方纪念版皮肤【仙剑廿五相守】让浓情回忆在指尖跳动当李逍遥、赵灵儿、林月如、阿奴齐聚你的键盘那些恍如昨日的画面是否又在你的心头浮现全新的Q版形象在保留人物原有特征的基…

基于java ssm springboot宠物用品商城系统

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 临近学期结束&#xff…

椭圆极点极线性质_又见阿氏圆——适合作椭圆大题的小题

如下图:过椭圆内一点作的直线交椭圆于,两点.是椭圆上相异的两点,满足分别平分,,求外接圆半径的最小值.解:作的外角角平分线与的延长线交于,的外角平分线与的延长线交于,根据内外角平…

基于javaweb jsp+servlet学生宿舍管理系统

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 临近学期结束&#xff…

先天性脑部发育异常_儿童脑发育不良的3大“诱因”,若孩子出现这5种异常,要警惕...

儿童脑发育不良主要是指脑组织减少,脑神经发育不健全,如果不及时治疗,会给患儿的正常生活带来严重影响。所以出现脑发育不良的症状时必须要及时找出病因,接受规范化的治疗,与此同时还应该注重对患儿的护理,…

FB混合C语言编译

这是群友分享的方法,这里只是作为记录和分享。 有了这个功能,可以很方便的拷贝一下C或者C代码直接用到FB上。 既然是混合C语言编译,当然得有C的代码。比如随便去网上找两个排序:冒泡排序和选择排序,代码如下&#xf…

基于Java SSM springboot+VUE+redis实现的前后端分类版网上商城项目

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 临近学期结束&#xff…

@value 注入静态属性_TP6依赖注入是如何实现的

TP6依赖注入是如何实现的先看下app/provider容器文件,此文件会在thinkAPP实例化的时候直接从新绑定类到的容器上。复制原有容器中的类可以先看下thinkAPP 构造方法中的处理逻辑/** * 架构方法 * access public * param string $rootPath 应用根目录 */ public f…

信捷触摸屏c语言脚本_信捷触摸屏TG系列产品型号说明及功能介绍

产品介绍全新外观设计,比普通款更薄1677万色,画质细腻无痕,显示效果媲美液晶显示器下载、启动、运行,三位一体的超高速响应支持C语言脚本功能,运算、自由协议编写、绘图,提高编程自由度支持BMP、JPEG格式图…

mysql搜索引擎_常见的 mysql 搜索引擎

简单来说,存储引擎就是指表的类型以及表在计算机上的存储方式。存储引擎的概念是MySQL的特点,Oracle中没有专门的存储引擎的概念,Oracle有OLTP和OLAP模式的区分。不同的存储引擎决定了MySQL数据库中的表可以用不同的方式来存储。我们可以根据…

基于java SSM springboot+redis网上水果超市商城设计和实现以及文档

作者主页:Java李杨勇 简介:Java领域优质创作者、【Java李杨勇】公号作者 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 文末获取源码 主要技术实现:spring、 springmvc、 redis、 springboot、 mybatis 、sessio…

mysql 组合索引 or_mysql索引优化实例(单列索引与组合索引)

索引一般用于在数据规模大时对查询进行优化的一种机制,对于一般的查询来说,mysql会去遍历整个表,来查询符合要求的结果;如果借助于mysql索引,mysql会将要索引的字段按照一定的算法进行处理,并生成一个类似于…

基于java SSM springboot景区行李寄存管理系统设计和实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 🍅 欢迎点赞 👍 收藏 ⭐留言 &#x1f…

Spring、SpringMVC和SpringBoot之间的关系

1、Spring Spring是一个开源容器框架,它接管了Web层、业务层、DAO层、持久性层的组件,并可以配置各种bean并维护bean到bean的关系。 其核心是控制反转(IOC)和面向方面(AOP),这只是一个分层的轻量级开源框架。 2、SpringMVC Spring MVC属于Spr…

mysql 5.7.13 mac_Mac 安装mysql 5.7.13版本 登录及改密码

小白用户,首次安装5.7.13,刚开始有些蒙,改密码就就是个坑,好在还是解决了,记录一下心路历程:安装的过程很简单,就直接到官方下mysql dmg,一路下一步就可以装完..Ps:安装完毕之前会有…