vue3中组件的v-model使用及详解
v-model input中使用双向绑定数据
v-model在vue中我们经常用它与input输入框的输入值进行绑定,简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定,如下vue3实现代码:
<template><input type="text" :value="tryText" @input="handelInput"><h2>{{tryText}}</h2>
</template><script>
import { ref} from "vue"export default {setup(){let tryText = ref("默认输入值")function handelInput(e) {tryText.value = e.target.value;//ref定义的数据访问和修改需要通过.value}return{tryText,handelInput}}}
</script>
相信大家经常使用v-model在ipnut中,现在让我们来看看在组件中如何使用v-model以及它的作用是啥
组件中的v-model
组件中如何使用v-model呢?我们来简单实现下
父组件
<template><!-- 组件绑定 v-model --><hy-input v-model="message"></hy-input><h2>{{message}}</h2>
</template><script>
import { ref } from '@vue/reactivity'
import HyInput from "../components/HyInput.vue"
export default {components: {HyInput },setup(){let message = ref("嘿嘿嘿ヽ(*^ー^)(^ー^*)ノ")return{message,}}
}
</script>
子组件
<template><button @click="handelClick">O(∩_∩)O哈哈~</button><br>
</template><script>export default {props:{modelValue:String,},emits:['update:modelValue'],setup(props,context){function handelClick() {context.emit("update:modelValue","O(∩_∩)O哈哈~")}return{handelClick,}}}
</script>
看到这里我们可能会有点疑点 为啥要发射事件呢?为啥会有一个默认的props接收值呢?别急我们从实现原理上看看就懂了
这样我们点击子组件的按钮就可以改变父组件中的message的数据,这就是一个简单的组件中的数据双向绑定v-model实现
既然是双向绑定,那不妨大胆猜测下是否和input中的实现原理相似呢?让我们来看看它的实现原理
父组件
<template><!-- 原理 --><hy-input :modelValue="message" @update:modelValue="message = $event"></hy-input><h2>{{message}}</h2>
</template><script>
import { ref } from '@vue/reactivity'
import HyInput from "../components/HyInput.vue"
export default {components: {HyInput },setup(){let message = ref("嘿嘿嘿ヽ(*^ー^)(^ー^*)ノ")return{message,}}
}
</script>
子组件不变哦
<template><button @click="handelClick">O(∩_∩)O哈哈~</button><br>
</template><script>export default {props:{modelValue:String,},emits:['update:modelValue'],setup(props,context){function handelClick() {context.emit("update:modelValue","O(∩_∩)O哈哈~")}return{handelClick,}}}
</script>
通过结果我们发现确实可以实现
这样我们就能很好理解子组件中的发射事件和默认接收值了,基本实现原理就是:父组件传值给子组件,子组件通过props进行接收,但是在子组件中需要修改改数据时,我们通过发射一个事件告诉父组件,然后父组件接收传递过来的值进行修改。其实就是父子组件之间的通信,不过vue帮我们做了一个简单的封装。
ps:默认v-model绑定的数据在子组件读取需要使用 modelValue来接收 发射事件默认叫update:modelValue ,想绑定多个值或者采用自定义名请看下面的其他写法哦
ps:不能想通过修改props来修改数据,首先这是一个特别不好的开发习惯,然后我们知道props的特性只是负责传递数据,修改props并不能达到我们想要的效果。我们应该通知父组件进行数据更新,这才是最好的做法。
其他写法
如果我们子组件中的input和父组件进行双向绑定那该怎么实现呢?以及需要传递多个双向绑定数据呢?自定义名呢?
父组件
<template><!-- 组件绑定 v-model --><hy-input v-model="message" v-model:text="inputText"></hy-input><h2>{{message}}</h2><h2>{{inputText}}</h2>
</template><script>
import { ref } from '@vue/reactivity'
import HyInput from "../components/HyInput.vue"
export default {components: {HyInput },setup(){let message = ref("嘿嘿嘿ヽ(*^ー^)(^ー^*)ノ")let inputText = ref("嘻嘻嘻嘻")return{message,inputText}}
}
</script>
子组件
<template><button @click="handelClick">O(∩_∩)O哈哈~</button><br><input type="text" v-model="customText"><br>
</template><script>
import {computed} from "vue"export default {props:{modelValue:String,text:String},emits:['update:modelValue',"update:text"],setup(props,context){function handelClick() {context.emit("update:modelValue","O(∩_∩)O哈哈~")}let customText = computed({set(value){context.emit("update:text",value)},get(){return props.text}})return{handelClick,customText,}}}
</script>
多个绑定值及改名写法 v-model:text=“inputText” 子组件中props直接是 text 发射事件名是 update:text
这里我们看到为了实现子组件中输入框v-model双向绑定父组件,我们需要借助计算属性computed来实现,可能有同学会想直接绑定props中的text不就可以了吗?还是上面那句话,若只是读取确实可以绑定,但是当你修改的时候是需要通过发射事件通知父组件进行数据更新(不能修改props中的值,只能读!!!).所以在计算属性中我们在set中发射了事件进行父组件数据更新,读取时我们则直接读取props中的值就好了。
end
vue3中组件的v-model使用及详解相关推荐
- props传递对象_vue组件中使用props传递数据的实例详解
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法 组件不仅仅是 ...
- Python中Print()函数的用法___实例详解(二)(全,例多)
Python中Print()函数的用法___实例详解(二)(全,例多) 目录 十一.Print()小例子 十二.Print()中文输入显示乱码问题 十三.Print()写入文件 十四.print()在 ...
- crashdumpandroid_Android 中Crash时如何获取异常信息详解及实例
Android 中Crash时如何获取异常信息详解 前言: 大家都知道,Android应用不可避免的会发生crash,无论你的程序写的多完美,总是无法完全避免crash的发生,可能是由于Android ...
- Android四大组件之bindService源码实现详解
Android四大组件之bindService源码实现详解 Android四大组件源码实现详解系列博客目录: Android应用进程创建流程大揭秘 Android四大组件之bindServic ...
- python爬取图片-Python爬取网页中的图片(搜狗图片)详解
前言 最近几天,研究了一下一直很好奇的爬虫算法.这里写一下最近几天的点点心得.下面进入正文: 你可能需要的工作环境: Python 3.6官网下载 本地下载 我们这里以sogou作为爬取的对象. 首先 ...
- SQL Server中通用数据库角色权限的处理详解
SQL Server中通用数据库角色权限的处理详解 前言 安全性是所有数据库管理系统的一个重要特征.理解安全性问题是理解数据库管理系统安全性机制的前提. 最近和同事在做数据库权限清理的事情,主要是删除 ...
- paging library java_Android官方分页组件介绍之Paging的使用详解
Android官方分页组件介绍之Paging的使用详解 发布时间:2018-04-27 13:47, 浏览次数:1618 , 标签: Android Paging Paging 使您的应用程序更容易从 ...
- python中append函数解析_对python中的pop函数和append函数详解
对python中的pop函数和append函数详解 pop()函数 1.描述 pop() 函数用于移除列表中的一个元素(默认最后一个元素),并且返回该元素的值. 语法 pop()方法语法: list. ...
- Android-Universal-Image-Loader三大组件DisplayImageOptions、ImageLoader、ImageLoaderConfiguration详解
原文地址为: Android-Universal-Image-Loader三大组件DisplayImageOptions.ImageLoader.ImageLoaderConfiguration详解 ...
- vue3 效率的提升、composition-api 和 ref 详解
vue3 效率的提升.composition-api 和 ref 详解 文章目录 vue3 效率的提升.composition-api 和 ref 详解 vue3 效率的提升 优化diff算法 hoi ...
最新文章
- 【机器学习】一位机器学习高手的个人技术书目
- 信息学奥赛一本通(C++)在线评测系统——基础(三)数据结构—— 1338:【例3-3】医院设置
- html dom概念,js学习之HTML DOM的一些基础概念
- Servlet API
- java中类定义修饰符_Java 中类和方法修饰符
- 美封锁对华半导体出口:14nm制造可以 X86设计不行
- VS2012下基于Glut glRotatef glTranslatef示例程序:
- HDU 1022 Train Problem I stack 基础题
- poj 1094 Sorting It All Out 很好的拓扑排序,让我对拓扑排序有了一个很好的写法!!!
- 三阶魔方CFOP cross总结
- 灵动ICPC冬令营基础-5
- 从游戏中学习产品设计05:反馈篇
- python wilcoxon test_自动化框架之 python+selenium+pytest · TesterHome
- Docker部署微服务应用笔记(三)
- bzoj4372 烁烁的游戏 动态点分治+线段树
- 还在为动态太大不能用发愁么?只需3步学会高效压缩GIF动图
- 【无标题】chatgpt桌面化,桌面应用的安装
- 动物科学可以转计算机专业吗,报考华中农业大学计算机,被调剂到动物科学,真不该盲目服从...
- python读取文件数据恢复软件_python深度学习pdf恢复
- matlab基带信号速率,如何用MATLAB产生25Gbaud的基带QPSK调制信号
热门文章
- 【供应链】供应链的底牌
- U 盘全新安装 Mac OS X 提示【这个“安装 OS X ……”应用程序副本不能验证】的解决方法
- 一首最好听的足球队歌,见证往日的辉煌
- 电感为什么会啸叫?漫画+动图,看完就明白了!
- MCE公司:Wnt (wingless) / β-catenin通路中的小分子抑制剂
- java jxl写excel_java读写Excel(JXL)
- 美的杯创意设计大赛,助推风扇时尚之风
- Kafka mirror
- 给你的电脑降降温!!!!!!
- linux双网卡配置bond4,centos7双网卡绑定bond0