文章属于速记,有错误欢迎指出。风格什么的不喜勿喷。

先来一个组件,不用vue-model,正常父子通信

<!-- parent -->
<template>
<div class="parent">
<p>我是父亲, 对儿子说: {{sthGiveChild}}</p>
<Child @returnBack="turnBack" :give="sthGiveChild"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
},
methods: {
turnBack(val) {
this.sthGiveChild = val;
}
}
}
</script>
<!-- child -->
<template>
<div class="child">
<p>我是儿子,父亲对我说: {{give}}</p>
<a href="javascript:;" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
props: {
give: String
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
</script>

点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。

改用v-model

<!-- parent -->
<template>
<div class="parent">
<p>我是父亲, 对儿子说: {{sthGiveChild}}</p>
<Child v-model="sthGiveChild"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
sthGiveChild: '给你100块'
};
},
components: {
Child
}
}
</script>
<!-- child -->
<template>
<div class="child">
<p>我是儿子,父亲对我说: {{give}}</p>
<a href="javascript:;" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
props: {
give: String
},
model: {
prop: 'give',
event: 'returnBack'
},
methods: {
returnBackFn() {
this.$emit('returnBack', '还你200块');
}
}
}
</script>

文案虽有不同,但是效果最终是一致的。

看看官方自定义组件的v-model

官方例子https://vuefe.cn/v2/api/#model

有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。

尝试把上边子组件的例子改一下,也是跑的通的

<!-- child -->
<template>
<div class="child">
<p>我是儿子,父亲对我说: {{value}}</p>
<a href="javascript:;" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
props: {
value: String
},
methods: {
returnBackFn() {
this.$emit('input', '还你200块');
}
}
}
</script>

做一下总结:

  • 如果你懒,不想自己去处理事件,那就用默认的 'value' && 'input' 事件去处理,如果用原生事件的,甚至连model属性也可以省去。
  • 如果你想自己的代码比较明确,区分出自定义事件,那么下面的组合才是你的菜。

    prop和event看你自己心情定义,当然要知名见意【尽量避开关键字】
model: {
prop: 'someProp', // 注意,是prop,不带s。我在写这个速记的时候,多写了一个s,调试到怀疑人生
event: 'someEvent'
}
this.$emit('someProp', [returnValueToParent])

如何在自定义组件中使用v-model的更多相关文章

  1. vue框架之自定义组件中使用v-model

    通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...

  2. 微信小程序自定义组件的使用以及调用自定义组件中的方法

    在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...

  3. 在自定义组件中获取spring底层组件

    要想在自定义组件中获取spring底层的各种组件,只需让自定义组件实现一系列接口即可,这些接口都是Aware的子接口.常见的有: 1. ApplicationContextAware——用于获取IOC ...

  4. 【vue】---- v-model在自定义组件中的使用

    1. v-model简介 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定,它的本质是一个语法 ...

  5. vue自定义组件中的v-model简单解释

    在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...

  6. Vue自定义组件中Props中接收数组或对象

    原文:https://www.jianshu.com/p/904551dc6c15 自定义弹框组件时,需要在弹框内展示商品list,所以需要组件中的对应字段接收一个Array数组,默认返回空数组[], ...

  7. 在ionic3自定义组件中使用官方组件

    先创建组件: ionic g component xxx 在components里面如下图引入

  8. Android开发之自定义组件和接口回调

    说到自定义控件不得不提的就是接口回调,在Android开发中接口回调用的还是蛮多的.在这篇博客开始的时候呢,我想聊一下iOS的自定义控件.在iOS中自定义控件的思路是继承自UIView, 在UIVie ...

  9. 自定义组件v-model的实质性理解

    用了几个月Vue一直很纠结自定义组件的v-model实现,最近开始学习React时,React中受控组件与状态提升的理念与v-model不谋而合. 转载请注明地址: https://www.cnblo ...

随机推荐

  1. 【一天一道LeetCode】#54. Spiral Matrix

    一天一道LeetCode系列 (一)题目 Given a matrix of m x n elements (m rows, n columns), return all elements of th ...

  2. 浅析GDAL库C#版本支持中文路径问题

    GDAL库对于C#的支持问题还是蛮多的,对于中文路径的支持就是其中之一(另一个就是通过OGR库获取图形的坐标信息). 关于C#支持中文路径,看过我之前博客的应该都不陌生,如果使用的是我修改过的GDAL ...

  3. libevent之Reactor模式

    通过前边的一篇博文轻量级网络库libevent初探,我们知道libevent实际上是封装了不同操作系统下的/dev/poll.kqueue.event ports.select.poll和epoll事 ...

  4. 算法精解:最小二乘法C实现

    计量经济学研究的直接目的是确定总体回归函数Yi=B1+B2Xi+ui,然而能够得到的只是来自总体的若干样本的观测值,要用样本信息建立的样本回归函数尽可能"接近"地去估计总体回归函数 ...

  5. 使用Multiplayer Networking做一个简单的多人游戏例子-1/3(Unity3D开发之二十五)

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51006463 ...

  6. cocos2d-x升级到3.4与创建android项目

    cocos2d-x升级到3.4与创建android项目 1 升级安装cocos2d-x windows7 64位机器, 到官网下载cocos2d-x-3.4: http://www.cocos2d-x ...

  7. SharePoint 2013 入门教程 [不断更新~]

    以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个SharePoint开发的成长记录,里面记录的都 ...

  8. LeetCode之“动态规划”:Word Break && Word Break II

     1. Word Break 题目链接 题目要求: Given a string s and a dictionary of words dict, determine if s can be seg ...

  9. 苹果新的编程语言 Swift 语言进阶(七)--枚举、结构、类

    Swift语言中,具有类特征的类型包括三种,即枚举类型.结构类型(包括基本类型,基本类型实际都是结构类型的特例).类.其中枚举类型.结构类型是属于值类型,类属于引用类型.三种类型都可以添加属性.方法. ...

  10. shell脚本调用python脚本的路径问题

    脚本的相互调用中,只有在同一级目录下才可以使用__file__参数去获取路径名,(在shell里使用pwd也同样),否则,使用的就是主文件(最开始运行的脚本程序)的所在位置,是错误路径:一定要注意当期 ...