怎么在Vue.js中通过自定义事件实现组件通信-创新互联

本篇文章给大家分享的是有关怎么在Vue.js中通过自定义事件实现组件通信，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创新互联技术团队10多年来致力于为客户提供网站制作、成都网站制作、品牌网站设计、营销型网站建设、搜索引擎SEO优化等服务。经过多年发展，公司拥有经验丰富的技术团队，先后服务、推广了数千家网站，包括各类中小企业、企事单位、高校等机构单位。

组件通信

从父组件向子组件通信，通过props传递数据就可以了，但Vue组件通信的场景不止有这一种，归纳起来，组件之间的通信可以用下图来表示：

怎么在Vue.js中通过自定义事件实现组件通信

自定义事件

当子组件需要向父组件传递数据时，就要用到自定义事件。子组件用**$ emit()来触发事件**，父组件用**$ on()**来监听子组件的事件。

父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的事件。




  
  
  
  
  自定义事件


  
    总数:{{total}}

怎么在Vue.js中通过自定义事件实现组件通信

子组件有两个按钮，分别实现+1和-1的效果，在改变组件的data “counter”后，通过$emit()在把它传递给父组件，父组件使用v-on:increase和v-on:reduce监听事件。

$emit()方法的第一个参数是自定义事件的名称，后面的参数是要传递的数据，可以不填或者填写多个。

注意：除了用v-on在组件上监听自定义事件外，也可以监听DOM事件，这时候可以用 .native修饰符表示监听的是一个原生事件，监听的是该组件的根元素：

使用v-model

Vue 2.x 可以在自定义组件上使用v-model指令。




  
  
  
  
  使用v-model


  
    总数：{{total}}

仍然是点击按钮+1的效果，不过这次组件$emit()的事件是特殊的input，在使用组件的父级，并没有在上使用@input=“handler”，而是使用了v-model板顶的一个数据total。这也可以称作是一个语法糖，因为上面的示例可以间接地用自定义事件来实现：


  总数：{{total}}

v-model还可以用来创建自定义的表单输入组件，进行数据双向绑定：




  
  
  
  
  自定义表单输入组件


  
    总数：{{total}}
    
    -1

怎么在Vue.js中通过自定义事件实现组件通信

注意：实现这样一个具有双向绑定的v-model组件要满足下面的两个要求：

接受一个value属性
在有新的value时触发input事件

以上就是怎么在Vue.js中通过自定义事件实现组件通信，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

网页名称：怎么在Vue.js中通过自定义事件实现组件通信-创新互联
链接分享：http://lszwz.com/article/gdces.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉，无效全额退款

乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。

友情链接交换友情链接

航空文化传媒温江网站制作响应式网站设计四川德阳主机托管中国电信西部信息中心机房成都木托盘成都网站制作班戈纳美网站服务器托管 vi形象设计

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室 All Rights Reserved 蜀ICP备2021004003号-25

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室

蜀ICP备2021004003号-25