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


<input v-model="something">

其实是语法糖


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

自定义组件使用v-model

//父组件中调用
<child v-model="msg" />
//子组件代码

<template>
  <div>
    <slot />
  </div>
</template> <script>
export default {
  name:'child',
  componentName:'child',
  data(){
    return {
      childVal:null
    }
  },
//vue中v-model默认绑定的是input事件,value参数,如果需要其他自定义的事件和数据名作为绑定,需要设置model
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {}
  },
  created(){
    this.$emit('change', this.value);
  },
} </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. JVM 性能调优 -Xmx、-Xms、-Xss

    1. -Xmx  设置应用程序(不是JVM)内存可用大小 ( 如果程序要花很大内存的话,可以修改缺省配置,但是不能超过机器的内存),即最大可用Heap的大小. 2. -Xms  设置初始Heap的大小 ...

  2. Java基于opencv—矫正图像

    更多的时候,我们得到的图像不可能是正的,多少都会有一定的倾斜,就比如下面的 我们要做的就是把它们变成下面这样的 我们采用的是寻找轮廓的思路,来矫正图片:只要有明显的轮廓都可以采用这种思路 具体思路: ...

  3. 作业二:构建swap函数

    一.swap代码 #include<stdio.h> int main() //主函数部分 { void swap(int *m,int *n); int a,b; int *p1,*p2 ...

  4. ASP.NET+MVC+EntityFramework快速实现增删改查

    本教程已经录制视频,欢迎大家观看我在CSDN学院录制的课程:http://edu.csdn.net/lecturer/944

  5. 什么是真正的Java技术,本篇文章让你了解

    “你学习一门技术的最佳时机是三年前,其次是现在.”这句话对于哪一种行业都很适用,如果你已经学习过Java,那么恭喜你你很有先见之明,如果你并不了解Java,这篇文章带你快速掌握Java的几个核心知识点 ...

  6. redis 设置分布式锁要避免死锁

    1. jedis 中 setnx key value 虽然可以处理同步问题 (setnx 有返回值 1是key不存在把它设置进去,0是key已经存在了)但是 setnx设置完后 程序的下一步 有可能挂 ...

  7. Ansible 批量修改密码

    客户要求每3个月修改一次主机密码.密码规则为客服提供的一串字符 xxxx + 主机后3位. 将需要登录主机添加到 Ansible. 将需要登录主机的公钥添加到 known_hosts ssh-keys ...

  8. 17.3 删除没用的project

    1.删除某一个或多个无用的project(历史project) 用十六进制编辑器打开"C:\Users\Baymax\Documents\Source Insight 4.0\Project ...

  9. [总结] Synchronized汇总

    Java中的每一个对象都可以作为锁. 1对于同步方法,锁是当前实例对象. 2对于静态同步方法,锁是当前对象的Class对象. 3对于同步方法块,锁是Synchonized括号里配置的对象. 当一个线程 ...

  10. DiscuzX /source/function/function_core.php通用核心函数库文件分析

    ... <?php /** * [Discuz!] (C)2001-2099 Comsenz Inc. * This is NOT a freeware, use is subject to l ...