©2020-2024 ioDraw All rights reserved,
Privacy Policy
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方式进行传递,这种方式需要事先在父组件中定义好回调方法,然后在需要的时候让子组件调用就可以
父组件:
子组件:
自定义事件
还可以使用自定义事件的方式进行传参,这时不需要给子组件像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指向会出现问题
第一种写法
第二种写法,使用ref
子组件中还是以$emit向父组件定义触发事件
父组件使用中定义子组件的ref属性进行获取
注意: 若想让自定义事件只能触发一次 可以使用once修饰符 或$once方法
触发自定义事件: this.$emit('方法名或者事件名',数据)
解绑自定义事件 this.$off('事件名')
组件上也可以绑定原生Dom事件 需要使用native修饰符
通过this.$refs.xxx.$on('方法名',回调) 绑定自定义事件时 回调要么配置在methods中 要么用箭头函数 否则this指向会出现问题
上述方法只适用于父子组件之间的传递,而不适合任意组件与任意组件之间的传递,比如兄弟组件之间的传递
## 任意组件之间的通信
**全局事件总线**
任意组件的通信vue中提供了全局事件总线来实现
一种可以在任意组件间通信的方式 本质上就是一个对象 必须满足以下条件\
所有的组件都必须能看到它
这个对象必须能够使用$on(绑定) $emit(触发) $off(解绑)方法去绑定 触发 和解绑事件
首先安装全局事件总线
$bus就是当前应用的vm
消息订阅与发布
我们除了vue提供的全局事件总线外,我们还可以使用一些第三方库来实现任意组件之间的通信
这里我们使用消息订阅与发布的pubsub-js这个库来实现(消息订阅与发布的第三方库有多种,此处只演示一种,不同库之间的语法也不同)
首先安装第三方库: