vue在自定义组件中使用v-model进行数据绑定的方法


Posted in Javascript onMarch 25, 2019

本文介绍了vue v-model进行数据绑定,分享给大家,具体如下

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

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

示例:

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

<!-- parent -->

<template>

<p class="parent">

 <p>我是父亲, 对儿子说: {{sthGiveChild}}</p>

 <Child @returnBack="turnBack" :give="sthGiveChild"></Child>

</p>

</template>

<script>

import Child from './Child.vue';

export default {

 data() {

  return {

   sthGiveChild: '给你100块'

  };

 },

 components: {

  Child

 },

 methods: {

  turnBack(val) {

   this.sthGiveChild = val;

  }

 }

}

</script>
<!-- child -->

<template>

<p class="child">

 <p>我是儿子,父亲对我说: {{give}}</p>

 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow"   @click="returnBackFn">回应</a>

</p>

</template>

<script>

export default {

 props: {

  give: String

 },

 methods: {

  returnBackFn() {

   this.$emit('returnBack', '还你200块');

  }

 }

}
</script>

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

改用v-model

<!-- parent -->

<template>

<p class="parent">

 <p>我是父亲, 对儿子说: {{sthGiveChild}}</p>

 <Child v-model="sthGiveChild"></Child>

</p>

</template>

<script>

import Child from './Child.vue';

export default {

 data() {

  return {

   sthGiveChild: '给你100块'

  };

 },

 components: {

  Child

 }

}
</script>
<!-- child -->

<template>

<p class="child">

 <p>我是儿子,父亲对我说: {{give}}</p>

 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow"   @click="returnBackFn">回应</a>

</p>

</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>

<p class="child">

 <p>我是儿子,父亲对我说: {{value}}</p>

 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow"   @click="returnBackFn">回应</a>

</p>

</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 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
Node.js之readline模块的使用详解
Mar 25 #Javascript
Javascript的this详解
Mar 23 #Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 #Javascript
vue中组件的3种使用方式详解
Mar 23 #Javascript
ES6入门教程之Array.from()方法
Mar 23 #Javascript
setTimeout与setInterval的区别浅析
Mar 23 #Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 #Javascript
You might like
ADODB类使用
2006/11/25 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
Vue实现验证码功能
2019/12/03 Javascript
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
python实现自动登录
2018/09/17 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python清空命令行方式
2020/01/13 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
简历上的自我评价
2014/02/03 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
青春演讲稿范文
2014/05/08 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android