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 树控件 比较好用
Jun 11 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
深入学习JavaScript对象
Oct 13 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
session 加入redis的实现代码
2016/07/15 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
玩转python爬虫之cookie使用方法
2016/02/17 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python实现图片文件批量重命名
2020/03/23 Python
python实现自动解数独小程序
2019/01/21 Python
python中几种自动微分库解析
2019/08/29 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
Python3获取cookie常用三种方案
2020/10/05 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
优秀的计算机专业求职信范文
2013/12/27 职场文书
成功的酒店创业计划书
2013/12/27 职场文书
药品采购员岗位职责
2014/02/08 职场文书
公司授权委托书样本
2014/09/15 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL