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与jquery中跳出循环的区别总结
Nov 04 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
为什么node.js不适合大型项目
Apr 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
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
php 伪静态之IIS篇
2014/06/02 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
javascript实现商品图片放大镜
2019/11/28 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python实现换位加密算法的示例
2018/10/14 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
技术岗位竞聘演讲稿
2014/05/16 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
七个非常实用的Python工具包总结
2021/06/15 Python
python识别围棋定位棋盘位置
2021/07/26 Python
浅析python中特殊文件和特殊函数
2022/02/24 Python