您好,登录后才能下订单哦!
这篇文章将为大家详细讲解有关vue3组件中v-model的本质与以及用法是怎样的,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
v-model在vue中我们经常用它与input输入框的输入值进行绑定,简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定,如下vue3实现代码:
<template> <input type="text" :value="tryText" @input="handelInput"> <h3>{{tryText}}</h3> </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呢?我们来简单实现下
父组件
<template> <!-- 组件绑定 v-model --> <hy-input v-model="message"></hy-input> <h3>{{message}}</h3> </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> <h3>{{message}}</h3> </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> <h3>{{message}}</h3> <h3>{{inputText}}</h3> </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中的值就好了。
关于vue3组件中v-model的本质与以及用法是怎样的就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。