参考资料: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. ArcGIS中的坐标系:基本概念和常用操作(一)

    本文呢是主要是借鉴李郎平李大大的博士论文和百度百科,里面还有一点点我自己的理解,希望能帮助自己加深对于坐标系的认识. 李大大的博客:http://blog.sciencenet.cn/u/Brume ...

  2. Map<String,Integer>acount字符串出现的次数

  3. vlookup使用

    数据处理过程中,需要excel进行简单的操作,比如vlookup,摸索之后,总结如下:

  4. js·逻辑运算

    || 遇到第一个为真就返回 && 遇到第一个为假就终止,返回false,如果没遇到就返回最后那一个 5&&4&&2&&1  ==> ...

  5. VritualBox安装CentOS及安装增强工具图文教程

    一  VM VirtualBox VirtualBox可在官网https://www.virtualbox.org/下载,完全免费. 二  安装CentOS系统(以CentOS6.9为例) 1.Cen ...

  6. Java成神路上之设计模式系列教程之一

    Java成神路上之设计模式系列教程之一 千锋-Feri 在Java工程师的日常中,是否遇到过如下问题: Java 中什么叫单例设计模式?请用Java 写出线程安全的单例模式? 什么是设计模式?你是否在 ...

  7. 家人的健康和offer的取舍

    记得2月份去Amazon面试的时候,小孩子正莫名的发烧,已经破纪录的连续烧了4天,到了6点面试完毕,面试官还试探性的问我还有没有什么要聊的,当时确实是没了心情,就想着回家看小病人,在回家的路上,暗暗的 ...

  8. routeros DDNS 动态域名更新IP

    :local ednsuser "账号":local ednspass "密码":local ednshost "域名":local edn ...

  9. java8_api_集合框架

    泛型表示 E,K,V,T 集合框架1    集合的概念    集合的好处    集合的层次结构        集合的概念        集合是一个包含一组对象的对象,也称为容器        集合中的 ...

  10. Linux基础入门-文件系统操作与磁盘管理

    一.简单文件系统操作: df (-h) 查看磁盘容量: rootfs作为系统启动时内核载入内存之后,在挂载真正的磁盘之前的一个临时文件系统: /dev/sda2 对应主机硬盘的分区,后面的a表示第几块 ...