在vue中使用v-model如何实现父子组件通信

web前端|js教程在vue中使用v-model如何实现父子组件通信

vue,父子组件v,model,vue父子组件通信,vue2,父子组件通信

web前端-js教程

vue.js，是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。下面这篇文章主要给大家介绍了关于vue项目中v-model父子组件通信实现的相关资料，需要的朋友可以参考下。

校园外卖php源码,ubuntu 看不了视频,stata15爬虫,php 分类展示,苏州seo思维lzw

前言

购买网站源码注意事项,vscode缩放部分界面,ubuntu 软件包管理,tomcat上传war,sqlite 提取,网页设计有banner还有什么,dedecms选择数据库失败,出租服务器违法吗,积分动力插件,bjui前端框架,拍死爬虫,php编程技术,seo弊端,springboot约束注解,帝国 cms 灵动标签获取栏目缩略图,网站全屏弹出窗口,网页翻页的大箭头,bootstrap搜索模板,炫酷网页后台管理系统界面,旅游静态页面设计模板,微信商城后台管理系统模板,装饰公司整站程序lzw

我们在vue项目中，经常有这样的需求，父组件绑定v-model，子组件输入更改父组件v-model绑定的数值。很多朋友对这种操作不是很清楚，这需要对v-model有比较深入的了解，今天谈谈v-model。

仿qq聊天界面源码,vscode 可视化插件,ubuntu 文件找回,集群tomcat重启脚本,burpsuite爬虫深度,php 检测ip,seo中常提到修改tkd指,那个财经网站可以聊天,帝国7.2会员注册模板lzw

vue的双向数据绑定

v-model这个指令只能用在, ,这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。</p><p>这个问题在很多前端面试中，会提及。面试官问你，vue的双向数据绑定原理是什么？当然，这个也是耳熟能详的问题，百度随便一搜索，到处都能找到答案。</p><p>一般都会搜索到，是用Object.defineProperty( ) ，来监听数据get和set，来实现数据劫持的。</p><p>假如对Object.defineProperty( )不是很了解，可以点击上面链接，看看其语法！</p><p><B>举个简单的例子：</B></p><pre name="colorcode" class="html">var blog = { name: 'haorooms博客'};console.log(blog.name); // haorooms博客</pre><p>如果想要在执行<code>console.log(blog.name)</code>的同时，直接给haorooms博客加个书名号，那要怎么处理呢？或者说要通过什么监听对象 blog的属性值。这时候<code>Object.defineProperty( )</code>就派上用场了，代码如下：</p><pre name="colorcode" class="html">var blog= {}var name = '';Object.defineProperty(blog, 'name', { set: function (value) { name = value; console.log('欢迎来到' + value); }, get: function () { return '《' + name + '》' }})blog.name = 'haorooms博客'; // 欢迎来到haorooms博客console.log(blog.name); // 《haorooms博客》</pre><p>上面代码执行一下，可以查看效果！</p><p>关于 vue的双向数据绑定，具体如何实现的？网上也有很多实现的代码，这里就不多累赘了！</p><p><B>v-model 的使用</B></p><p>上面开了一个小差，讲了那么多，其实就是为了说明Vue 是单项数据流，v-model 只是语法糖而已。</p><pre name="colorcode" class="html"></pre><p>第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样：</p><pre name="colorcode" class="html"></pre><p>也就是说，</p><pre name="colorcode" class="html"></pre><p>也可以写成</p><pre name="colorcode" class="html"></pre><p><B>v-model在组件上的使用</B></p><p>回到我们一开始的疑问了？vue中v-model如何进行父子组件的通信？如何在组件中使用呢？假如你理解了我上面的例子，那么，我们就可以很简单的在组件中使用v-model了。</p><p>父组件代码如下：</p><pre name="colorcode" class="html"> <p id="demo"> <span>{{haorooms}}</span></p> import testModel from 'src/components/testModel' export default { data(){ return{ haorooms: "haorooms" } }, components: { testModel, } }</pre><p>子组件代码如下：</p><pre name="colorcode" class="html"><span> </span> export default { data(){ return{ } }, props: ["value"], model: { prop: 'value', event: 'balabala' } }</pre><p>我们可以通过上面代码，子组件修改父组件v-model绑定的值！</p><p>实现截图如下：</p><p><img decoding="async" src="https://liuzhongwei2023.oss-cn-shanghai.aliyuncs.com/uploads/2023/js/134664.jpg" alt="在vue中使用v-model如何实现父子组件通信" title="在vue中使用v-model如何实现父子组件通信" alt="在vue中使用v-model如何实现父子组件通信" title="在vue中使用v-model如何实现父子组件通信" /></p><p><B>v-model 的缺点和解决办法</B></p><p>在创建类似复选框或者单选框的常见组件时，v-model就不好用了。</p><pre name="colorcode" class="html"></pre><p>我们可以用如下方式解决：</p><pre name="colorcode" class="html"></pre><p>父组件可以如下写：</p><pre name="colorcode" class="html"></pre><p>子组件：</p><pre name="colorcode" class="html"><input type="checkbox"  @change="$emit('balabala', $event.target.checked)" :checked="value" /> export default { data(){ return{ } }, props: ['checked'], //这里就不用 value 了，而是 checked model: { prop: 'checked', event: 'balabala' }, }</pre><p>上面是我整理给大家的，希望今后会对大家有帮助。</p><p>相关文章：</p><p>使用Javascript如何实现自定义事件机制</p><p>详细解读javascript中map数据结构</p><p>使用Javascript如何开发二维周视图日历</p> <div class="tag"> <a href="https://www.liuzhongwei.com/tags/o198595" rel="tag">vue父子组件通信</a> <a href="https://www.liuzhongwei.com/tags/z198637" rel="tag">父子组件v</a> <a href="https://www.liuzhongwei.com/tags/v197526" rel="tag">父子组件通信</a></div> </div> <hr> <header class="lbox"> <div class="post-content"> <span style="float:left;padding-right:10px;"><a href="https://www.liuzhongwei.com/page/417528.html" rel="bookmark" title="Vue中父子组件间怎么通信？聊聊父传子和子传父办法"> <img src="https://liuzhongwei2023.oss-cn-shanghai.aliyuncs.com/uploads/wpic/w04426.jpg" alt="在vue中使用v-model如何实现父子组件通信" /> </a></span> <li><a href="https://www.liuzhongwei.com/page/417528.html" rel="bookmark" title="Vue中父子组件间怎么通信？聊聊父传子和子传父办法">Vue中父子组件间怎么通信？聊聊父传子和子传父办法</a></li> <p>Vue中父子组件间怎么通信？聊聊父传子和子传父办法 | Vue中父子组件间怎么通信？聊聊父传子和子传父办法 ... </p> </div> </header> <header class="lbox"> <div class="post-content"> <span style="float:left;padding-right:10px;"><a href="https://www.liuzhongwei.com/page/330908.html" rel="bookmark" title="在Vue2.0中如何实现组件及父子组件通信"> <img src="https://liuzhongwei2023.oss-cn-shanghai.aliyuncs.com/uploads/wpic/w04426.jpg" alt="在vue中使用v-model如何实现父子组件通信" /> </a></span> <li><a href="https://www.liuzhongwei.com/page/330908.html" rel="bookmark" title="在Vue2.0中如何实现组件及父子组件通信">在Vue2.0中如何实现组件及父子组件通信</a></li> <p>在Vue2.0中如何实现组件及父子组件通信 | 在Vue2.0中如何实现组件及父子组件通信 ... </p> </div> </header> <header class="lbox"> <div class="post-content"> <span style="float:left;padding-right:10px;"><a href="https://www.liuzhongwei.com/page/328907.html" rel="bookmark" title="在Angular2中如何实现父子组件通信"> <img src="https://liuzhongwei2023.oss-cn-shanghai.aliyuncs.com/uploads/wpic/w04426.jpg" alt="在vue中使用v-model如何实现父子组件通信" /> </a></span> <li><a href="https://www.liuzhongwei.com/page/328907.html" rel="bookmark" title="在Angular2中如何实现父子组件通信">在Angular2中如何实现父子组件通信</a></li> <p>在Angular2中如何实现父子组件通信 | 在Angular2中如何实现父子组件通信 ... </p> </div> </header> <footer class="entry-footer"> <span class="cat-links">Posted in 未分类</span> | <span class="tags-links">Tagged <a href="https://www.liuzhongwei.com/tags/o198595" rel="tag">vue父子组件通信</a>, <a href="https://www.liuzhongwei.com/tags/z198637" rel="tag">父子组件v</a>, <a href="https://www.liuzhongwei.com/tags/v197526" rel="tag">父子组件通信</a></span> </footer>  <nav class="navigation post-navigation" aria-label="文章"> <h2 class="screen-reader-text">文章导航</h2> <div class="nav-links"><div class="nav-previous"><a href="https://www.liuzhongwei.com/page/1255142.html" rel="prev">mysql怎么查询表格升序和代码 |mysql 批量更新锁表</a></div><div class="nav-next"><a href="https://www.liuzhongwei.com/page/429147.html" rel="next">os系统微信多开，苹果手机如何微信多开 – 微信多开 – 前端|</a></div></div> </nav> </main> </section> <aside id="secondary" class="widget-area col-sm-12 col-md-12 col-lg-4" role="complementary"> <hr> <section id="block-4" class="widget widget_block"> <hr class="wp-block-separator has-alpha-channel-opacity"/> </section></aside> </div> </div> </div> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="container"> <div class="site-info"> © 牛的日记 | www.liuzhongwei.com <br> 网站部分内容来源于网友供稿，若有侵权请联系删除，970928#QQ.com<br> </div> </div> </footer> </div>  <script type="text/javascript" src="https://www.liuzhongwei.com/wp-content/plugins/colorcode/js/wp-colorcode.js?ver=20121102"></script> <script type="text/javascript"> window.onload = function() { DlHighlight.HELPERS.highlightByName('colorcode', 'pre','', false); } </script>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?362c2492cf3ac506a1c032629e391abd"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>