参考资料:vue官网
在vue 中使用v-model双向绑定


  1. <input v-model="something">

其实是语法糖


  1. <input :value="something" @:input="something = $event.target.value">

自定义组件使用v-model

  1. //父组件中调用
  2. <child v-model="msg" />
  1. //子组件代码
  2. <template>
  3.   <div>
  4.     <slot />
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9.   name:'child',
  10.   componentName:'child',
  11.   data(){
  12.     return {
  13.       childVal:null
  14.     }
  15.   },
  16. //vue中v-model默认绑定的是input事件,value参数,如果需要其他自定义的事件和数据名作为绑定,需要设置model
  17.   model: {
  18.     prop: 'value',
  19.     event: 'change'
  20.   },
  21.   props: {
  22.     value: {}
  23.   },
  24.   created(){
  25.     this.$emit('change', this.value);
  26.   },
  27. }
  28. </script>

vue 组件自定义v-model的更多相关文章

  1. vue-gemini-scrollbar(vue组件-自定义滚动条)

    vue-gemini-scrollbar(vue组件-自定义滚动条) https://segmentfault.com/a/1190000013338560

  2. vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...

  3. vue组件---自定义事件

    首先简单回顾下组件事件及组件的复用 demo1:按钮事件 <div class="button_area"> <button-area></butto ...

  4. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

  5. 前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令

    一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...

  6. 使用VUE组件创建SpreadJS自定义单元格(二)

    在上篇中,我们介绍了如何通过设置runtimeCompiler为true,在Vue中实现了动态创建电子表格组件.想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一). 但是在 ...

  7. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  8. Vue组件绑定自定义事件

    Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...

  9. 【VUE】自定义组件

    [VUE]自定义组件 转载: ============================================ ======================================== ...

随机推荐

  1. 51单片机---点亮一个LED灯

    1 程序源码 #include <REGX52.H> `包含51单片机的头文件` sbit led = P0^0; int main(void) { while(1) { led = 1; ...

  2. js 实现仿 淘宝 五星评价 demo

    <style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.co ...

  3. EasyUI学习(一)——EasyUI入门

    EasyUI学习总结(一)——EasyUI入门 一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:j ...

  4. 13. Forensics (取证 4个)

    Maltego是一个取证和数据挖掘应用程序. 它能够查询各种公共数据源,并以图形方式描绘人员,公司,网站和文档等实体之间的关系. Maltego也是一个开源智能,但不是开源软件. Helix The ...

  5. 7. Vulnerability exploitation tools (漏洞利用工具 11个)

    Metasploit于2004年发布时,将风暴带入了安全世界.它是开发,测试和使用漏洞利用代码的高级开源平台. 可以将有效载荷,编码器,无操作生成器和漏洞利用的可扩展模型集成在一起,使得Metaspl ...

  6. BF匹配器

    对于BF匹配器,首先我们得用cv2.BFMatcher()创建BF匹配器对象.它取两个可选参数,第一个是normType.它指定要使用的距离量度.默认是cv2.NORM_L2.对于SIFT,SURF很 ...

  7. Java技术学习之影响MySQL性能的配置参数

    本文将介绍MySQL参数的五大类设置,平时我们一般都很少碰它们,在进行MySQL性能调优和故障诊断时这些参数还是非常有用的. (一)连接连接通常来自Web服务器,下面列出了一些与连接有关的参数,以及该 ...

  8. 测试CentOS-7-x86_64-Minimal-1708.iso这种光盘安装效果

    在dvd1光盘安装选择mininal时有292个包 [root@localhost ~]# rpm -qa|wc -l 292 [root@localhost ~]# 测试下使用mininal的iso ...

  9. 左耳听风-ARTS-第2周(2019/3/31-2019/4/6)

    Algorithm 验证括号题(https://leetcode.com/problems/valid-parentheses/).这道题在极客时间上覃超的<算法面试通关40讲>(http ...

  10. 手写SpringMVC实现

    设计自己的MVC架构 1.读取配置通过web.xml中加载我们自己写的MyDispatcherServlet和读取配置文件. 2.初始化九大组件只需实现基本的:1).加载配置文件:2).扫描用户配置包 ...