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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
js实现打字小游戏
2019/12/17 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
解析Python3中的Import
2019/10/13 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
What is view? why do we have view?
2012/06/22 面试题
教师推荐信范文
2013/11/24 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL