vue如何在自定义组件中使用v-model
时间:2019-04-14
本文章向大家介绍vue如何在自定义组件中使用v-model,主要包括vue如何在自定义组件中使用v-model使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
v-model指令
所谓的“指令”其实就是扩展了HTML标签功能(属性)。
先来一个组件,不用vue-model,正常父子通信
<!-- parent --> <template> <div class="parent"> <p>我是父亲, 对儿子说: {{sthGiveChild}}</p> <Child @returnBack="turnBack" :give="sthGiveChild"></Child> </div> </template> <script> import Child from './Child.vue'; export default { data() { return { sthGiveChild: '给你100块' }; }, components: { Child }, methods: { turnBack(val) { this.sthGiveChild = val; } } } </script>
<!-- child --> <template> <div class="child"> <p>我是儿子,父亲对我说: {{give}}</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a> </div> </template> <script> export default { props: { give: String }, methods: { returnBackFn() { this.$emit('returnBack', '还你200块'); } } } </script>
点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。
改用v-model
<!-- parent --> <template> <div class="parent"> <p>我是父亲, 对儿子说: {{sthGiveChild}}</p> <Child v-model="sthGiveChild"></Child> </div> </template> <script> import Child from './Child.vue'; export default { data() { return { sthGiveChild: '给你100块' }; }, components: { Child } } </script>
<!-- child --> <template> <div class="child"> <p>我是儿子,父亲对我说: {{give}}</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a> </div> </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> <div class="child"> <p>我是儿子,父亲对我说: {{value}}</p> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a> </div> </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])
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Dapper.Net 应用
- linux(十)配置ssh免密登录实现
- 微信群也有群相册功能了,终于可以给手机相册腾出空间了!
- PHP5.3、PHP5.4安装ZendOptimizer
- linux(十一)之初始化文件
- C编译: 动态连接库 (.so文件)
- 腾讯叮当首都发布生态合作伙伴计划,全面开放AI能力
- Python火爆的背后的应用领域是数据挖掘、大数据和人工智能的应用吗?
- linux(九)之网络基础
- eclipse从数据库逆向生成Hibernate实体类
- C编译: 使用gdb调试
- linux(八)linux系统中查找文件二
- Java魔法堂:String.format详解
- Java基础12 类型转换与多态
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PAT (Advanced Level) Practice 1039 Course List for Student (25分)
- Codeforces Round #615 (Div. 3) E. Obtain a Permutation
- 数据结构实验完结撒花之内部排序比较
- Codeforces Round #615 (Div. 3) F. Three Paths on a Tree
- Matlab 内联函数及匿名函数
- 渗透测试 | 内网信息收集
- 浅谈 CSS 的用法
- PAT (Advanced Level) Practice 1049 Counting Ones (30分)
- 用递归的思想实现二叉树前、中、后序迭代遍历
- 利用WAF进行拒绝服务攻击
- leetcode树之从根到叶的二进制数之和
- Vue3 模板编译原理
- leetcode树之从上到下打印二叉树
- leetcode树之二叉搜索树的最近公共祖先
- leetcode树之从翻转二叉树