Vue组件通信_android组件间通信

Vue组件通信_android组件间通信Vue组件通信

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

Vue的组件之间是需要互相通信和传递数据的,这里演示几个常用的通信方式

父与子
  props方式

  props让组件接收外部传过来的数据

   传递数据<组件标签名 name=’***’ :传递参数名=’值’/> 这里传递参数名前加” : ” 从而可以动态绑定数据

   接收数据

       第一种方式(只接收) props:[‘参数名1′,’参数名2’,…….]

      第二种方式 (限制类型) props:{参数名1:参数类型,参数2:参数类型,……}

      第三种方式 (限制类型.限制必要性 指定默认值)

         props:{

                参数1:{

                   type:String(Number,Boolean,Object….) //参数类型

                   required:true, //参数必要性

                   default:’默认值’

     }

}        

注意: props是只读的,vue底层会监测对props的修改,如果进行了修改,就会发出警告 若业务需求确实需要修改那么请复制props的数据到data中,然后可以修改data中的数据

父子组件之间传递数据可以直接使用props方式进行传递,这种方式需要事先在父组件中定义好回调方法,然后在需要的时候让子组件调用就可以
父组件:

   Vue组件通信_android组件间通信

 Vue组件通信_android组件间通信

子组件:

自定义事件
还可以使用自定义事件的方式进行传参,这时不需要给子组件像props那样传参,子组件也不用接收

  适用于子组件====>父组件

   使用场景: 子组件想给父组件传数据 那么就要在父组件中给子组件绑定自定义事件(事件的回调在父组件中)

  绑定自定义事件

   a 第一种方式 在父组件中<Demo @事件名=’方法名’/>或<Demo v-on:事件名=’方法’/>

   b 第二种方式 在父组件中 this.$refs.demo.$on(‘事件名’,方法)  (此处的$refs.demo的demo是给子组件起的 ref=’demo’)

   c 若想让自定义事件只触发一次 可以使用once修饰符 或$once方法

   触发自定义事件this.$emit(‘事件名’,数据)

   解绑自定义事件this.$off(‘事件名’)

   组件上也可以绑定原生DOM事件 需要使用native修饰符 @click.native=”show”

   上面绑定自定义事件 即使绑定的是原生事件也会被认为是自定义的 需要加native 加了后就将此事件给组件的根元素

   注意: 通过 this.$refs.xxx.$on(‘事件名’,回调函数) 绑定自定义事件时 回调函数要么配置在methods中 要么使用箭头函数 否则 this指向会出现问题 

第一种写法
               Vue组件通信_android组件间通信

 Vue组件通信_android组件间通信

 

第二种写法,使用ref

Vue组件通信_android组件间通信

 

子组件中还是以$emit向父组件定义触发事件
父组件使用中定义子组件的ref属性进行获取
      

Vue组件通信_android组件间通信

 

注意: 若想让自定义事件只能触发一次 可以使用once修饰符 或$once方法

触发自定义事件: this.$emit(‘方法名或者事件名’,数据)
解绑自定义事件 this.$off(‘事件名’)
组件上也可以绑定原生Dom事件 需要使用native修饰符
通过this.$refs.xxx.$on(‘方法名’,回调) 绑定自定义事件时 回调要么配置在methods中 要么用箭头函数 否则this指向会出现问题

上述方法只适用于父子组件之间的传递,而不适合任意组件与任意组件之间的传递,比如兄弟组件之间的传递

## 任意组件之间的通信
**全局事件总线**
任意组件的通信vue中提供了全局事件总线来实现

一种可以在任意组件间通信的方式 本质上就是一个对象 必须满足以下条件\

    所有的组件都必须能看到它

   这个对象必须能够使用$on(绑定) $emit(触发) $off(解绑)方法去绑定 触发 和解绑事件

首先安装全局事件总线
       Vue组件通信_android组件间通信

 $bus就是当前应用的vmVue组件通信_android组件间通信

 Vue组件通信_android组件间通信

 Vue组件通信_android组件间通信

 

消息订阅与发布
我们除了vue提供的全局事件总线外,我们还可以使用一些第三方库来实现任意组件之间的通信
这里我们使用消息订阅与发布的pubsub-js这个库来实现(消息订阅与发布的第三方库有多种,此处只演示一种,不同库之间的语法也不同)

首先安装第三方库:

Vue组件通信_android组件间通信

 Vue组件通信_android组件间通信

 Vue组件通信_android组件间通信

 Vue组件通信_android组件间通信

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/200687.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 渗透测试工具包 | 开源安全测试工具 | 网络安全工具

    渗透测试工具包 | 开源安全测试工具 | 网络安全工具项目介绍记录渗透测试开源工具。自动化渗透测试 AttackSurfaceMapper-自动化渗透测试工具,使用手册/测试流程。 vajra-自动化渗透测试. Savior-渗透测试报告自动生成工具!. 漏洞利用框架 hackUtils-它是一个用于渗透测试和网络安全研究的黑客工具包,渗透以及web攻击脚本。 msf框架: pocsscan攻击框架 Pocsuite攻击框架 Beebeeto攻击框架 …

  • 【转载】.NET Remoting学习笔记(二)激活方式

    【转载】.NET Remoting学习笔记(二)激活方式

    2021年11月18日
  • FusionChartsFree及其教程「建议收藏」

    FusionChartsFree及其教程「建议收藏」今天在群里有人发了这个东西,主是FLASH图表控件,看到标题说是支持多种语言的,就下下来试了下,呵呵。。发现还真的很有用。。。先记下来。。以后可用于自己做的项目中。。同时也上网找到一本《FusionChartsFree中文开发指南.pdf》,同时也上传上来吧。。。…

  • java访问asmx接口

    java访问asmx接口网上找了很多例子,很多没法用,只有这个成功了记录一下,原链接忘了,大哥不好意思<dependency><groupId>commons-httpclient</groupId><artifactId>commons-httpclient</artifactId><version>3.1</version>&l

  • 1000套安卓(Android)毕业设计(带论文)、大作业、实例快速下载 (Android Studio)

    1000套安卓(Android)毕业设计(带论文)、大作业、实例快速下载 (Android Studio)ctrl+F快速定位序号 类型 项目名称 1 毕业设计 毕业设计-基于安卓Android学生考勤信息管理系统.zip 2 毕业设计 毕业设计-安卓Android教务选课成绩管理系统.zip 3 毕业设计 114基于Android的理财记账本20141215+论文+需求文档+演示视频.zip.zip 4 毕业设计 Android科大讯飞语音识别.zip 5 毕业设计 基于android的点餐系统.zip.z..

  • Python的random函数用法详解[通俗易懂]

    Python的random函数用法详解[通俗易懂]在random模块下提供了如下常用函数:random.seed(a=None,version=2):指定种子来初始化伪随机数生成器。random.randrange(start,stop[,stop]):返回从start开始到stop结束、步长为step的随机数。其实就相当于choice(range(start,stop,step))的效果,只不过实际底层并不生成区间对象。random.randint(a,b):生成一个范围为a≤N≤b的随机数。其等同于ra

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号