大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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组件间通信

子组件:

自定义事件
还可以使用自定义事件的方式进行传参,这时不需要给子组件像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组件间通信

第二种写法,使用ref

Vue组件通信_android组件间通信

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

Vue组件通信_android组件间通信

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

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

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