vue3组件中v-model的使用以及深入讲解
目录
- v-model input中使用双向绑定数据
- 组件中的v-model
- 其他写法
- 总结
v-model input中使用双向绑定数据
v-model在vue中我们经常用它与input输入框的输入值进行绑定,简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定,如下vue3实现代码:
{{tryText}}
相信大家经常使用v-model在ipnut中,现在让我们来看看在组件中如何使用v-model以及它的作用是啥
组件中的v-model
组件中如何使用v-model呢?我们来简单实现下
父组件
{{message}}
子组件
看到这里我们可能会有点疑点 为啥要发射事件呢?为啥会有一个默认的props接收值呢?别急我们从实现原理上看看就懂了
这样我们点击子组件的按钮就可以改变父组件中的message的数据,这就是一个简单的组件中的数据双向绑定v-model实现
既然是双向绑定,那不妨大胆猜测下是否和input中的实现原理相似呢?让我们来看看它的实现原理
父组件
{{message}}
子组件不变哦
通过结果我们发现确实可以实现
这样我们就能很好理解子组件中的发射事件和默认接收值了,基本实现原理就是:父组件传值给子组件,子组件通过props进行接收,但是在子组件中需要修改改数据时,我们通过发射一个事件告诉父组件,然后父组件接收传递过来的值进行修改。其实就是父子组件之间的通信,不过vue帮我们做了一个简单的封装。
ps:默认v-model绑定的数据在子组件读取需要使用 modelValue来接收 发射事件默认叫update:modelValue ,想绑定多个值或者采用自定义名请看下面的其他写法哦
ps:不能想通过修改props来修改数据,首先这是一个特别不好的开发习惯,然后我们知道props的特性只是负责传递数据,修改props并不能达到我们想要的效果。我们应该通知父组件进行数据更新,这才是最好的做法。
其他写法
如果我们子组件中的input和父组件进行双向绑定那该怎么实现呢?以及需要传递多个双向绑定数据呢?自定义名呢?
父组件
{{message}}{{inputText}}
子组件
多个绑定值及改名写法 v-model:text=“inputText” 子组件中props直接是 text 发射事件名是 update:text
这里我们看到为了实现子组件中输入框v-model双向绑定父组件,我们需要借助计算属性computed来实现,可能有同学会想直接绑定props中的text不就可以了吗?还是上面那句话,若只是读取确实可以绑定,但是当你修改的时候是需要通过发射事件通知父组件进行数据更新(不能修改props中的值,只能读!!!).所以在计算属性中我们在set中发射了事件进行父组件数据更新,读取时我们则直接读取props中的值就好了。
总结 【vue3组件中v-model的使用以及深入讲解】到此这篇关于vue3组件中v-model使用以及讲解的文章就介绍到这了,更多相关vue3组件v-model使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中,逐渐适应一个人到底意味着什么()
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售
- “成长”读书社群招募
- 2020-04-07vue中Axios的封装和API接口的管理