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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
vue实现分页加载效果
Dec 24 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
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/10/09 PHP
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP通用检测函数集合
2006/11/25 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
基于Vue实现拖拽效果
2018/04/27 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
python中list列表的高级函数
2016/05/17 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Python JSON编解码方式原理详解
2020/01/20 Python
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
爱护草坪标语
2014/06/24 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
周一问候语大全
2015/11/10 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python
Flink 侧流输出源码示例解析
2022/09/23 Servers