vue如何在自定义组件中使用v-model


Posted in Javascript onMay 14, 2018

v-model指令

所谓的“指令”其实就是扩展了HTML标签功能(属性)。

先来一个组件,不用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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @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])

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
JavaScript常用数学函数用法示例
May 14 #Javascript
JavaScript中常见内置函数用法示例
May 14 #Javascript
纯js封装的ajax功能函数与用法示例
May 14 #Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 #Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 #Javascript
jQuery中元素选择器(element)简单用法示例
May 14 #jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 #jQuery
You might like
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP代码优化技巧小结
2015/09/29 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
javascript 闭包详解
2015/02/15 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
Python简单I/O操作示例
2019/03/18 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
python实现图片转字符画的完整代码
2021/02/21 Python
岗位职责范本
2013/11/23 职场文书
家长评语和期望
2014/02/10 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
优秀教研组申报材料
2014/12/26 职场文书
导游欢迎词范文
2015/01/23 职场文书
天下第一关导游词
2015/02/06 职场文书
毕业典礼主持词
2015/06/29 职场文书
青年联谊会致辞
2015/07/31 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers