参考资料: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. s21day22 python笔记

    s21day22 python笔记 一.内容回顾及补充 模块补充 importlib.import_module:通过字符串的形式导入模块 #示例一: import importlib # 用字符串的 ...

  2. 如何使用油猴脚本不要vip就能观看各大视频网站如腾讯,爱奇艺等的vip视频

    如何使用油猴脚本不要vip就能观看各大视频网站如腾讯,爱奇艺等的vip视频 首先打开谷歌商店(这里需要fq,如不能fq的小伙伴请看上面写的Chrome怎么访问外网) 搜索Tampermonkey,点击 ...

  3. numpy鸢尾花

    import numpy from sklearn.datasets import load_iris #从sklearn包自带的数据集中读出鸢尾花数据集data iris_data = load_i ...

  4. Nginx在CentOS7下的安装

    一,安装前的准备(Nginx安装之前,需要的工具以及依赖包:wget.gcc.pcre.openssl.zlib ) 1,wget安装 yum -y install wget 2,gcc安装 yum ...

  5. 贴图平移&凹凸贴图偏移

      1. 平移(UV坐标动画) UV 坐标动画或 UV 平移的含义是,水平 (U) 和/或垂直 (V) 移动纹理的 UV 坐标,以产生复杂动画的错觉. 在以下示例中,火焰纹理沿着 U(水平)方向平移, ...

  6. 二维数组 \n是换行 三目运算符 if语句示例

    今天学习了二维数组 // 1.定义数组array并赋值 // var arr1=[1,2,3,4,5,]; // alert(arr1[2]); 数组的长度就是值的多少 获取数值的长高度=最大下标+1 ...

  7. collection和association的区别于关系

    比如同时有User.java和Card.java两个类 User.java如下: public class User{ private Card card_one; private List<C ...

  8. Hello_World

    简单A+B #include <stdio> int main() { int a,b; scanf("%d%d",&a, &b); printf(&q ...

  9. Mysql逆向工程效率神器之使用IDE自动生成Java实体类

    Mysql逆向工程效率神器之使用IDE自动生成Java实体类 简介:实战使用IDE根据Mysql自动生成java pojo实体类 1.IDEA连接数据库 菜单View→Tool Windows→Dat ...

  10. php session的一些操作

    <?php /** * Session控制类 */ class Session{ /** * 设置session * @param String $name session name * @pa ...