Vue组件间通讯方式

总结Vue组件间通讯方式

　　父子组件通讯

　　　　父向子

　　　　　　一般为props：在父组件内，子组件标签上写明传递参数的名字和值，在子组件内部用props声明，即可使用

//子组件标签 
<Pagination :abc=abc  def="123"/>
//子组件内部
props:['abc,'def'],
setup(props){

}

　　　　子向父 

　　　　　　　一般为自定义事件方法：在父组件内，子组件标签上写明事件名称，在子组件内部触发，回调在父组件。

父组件内，子组件标签上，
　　<Pagination  @goPages="goPages" />
子组件内触发
　　$emit('goPages',canshu)  
父组件内的回调
　　goPages(){
 　　 XXX  
　　}　

　　任意组件通信

　　　　　　一般用全局事件总线，vue2中的$bus,vue3的mitter。

　　　　　　　　vue2中的全局事件总线

1. 安装全局事件总线：
   new Vue({
   	......
   	beforeCreate() {
   		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
   	},
       ......
   }) 
2. 使用事件总线：
   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)
      }
   2. 提供数据：this.$bus.$emit('xxxx',数据)

3. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

　　　　　　在vue3里，全局事件总线被取消了，要是想使用，利用插件 mitt

1. npm i mitt
2. src/mitt/index.js
   // 固定格式
   import mitt from 'mitt';
   const mitter = mitt()
   export default  mitter

3. 相互通信的两个组件中引入
   import mitter  from "@/mitt";
4. 发送数据组件--事件触发
   mitter.emit('toQuery',myQuery)
5. 接受数据组件--事件监听
   mitter.on('toQuery',(q)=>{
   	myQuery =  q
   	//myQuery已经声明，toQuery为事件名称，q为传递的参数
   })
6. 解绑
   emitter.all.clear()
   emitter.off('toQuery')

　　　　　组件间通讯还可以用消息的订阅与发布，我不太想用，也得用插件