大家好，又见面了，我是你们的朋友全栈君。
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(‘事件名’,方法) (此处的
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(触发)
首先安装全局事件总线
$bus就是当前应用的vm
消息订阅与发布 我们除了vue提供的全局事件总线外,我们还可以使用一些第三方库来实现任意组件之间的通信 这里我们使用消息订阅与发布的pubsub-js这个库来实现(消息订阅与发布的第三方库有多种,此处只演示一种,不同库之间的语法也不同)
首先安装第三方库:
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/200687.html原文链接：https://javaforall.cn
