Vue组件通信的方式有哪些?

1、props父传子
2、emit 子传父
3、vuex全局通讯
4、EventBus:这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。
https://blog.csdn.net/caoxinjian423/article/details/108965056
Event.on("方法名",data)接收

 var Event=new Vue();
 Event.$emit(事件名,数据)//发送事件
 Event.$on(事件名,callback);//接收事件，callback监听当前实例上的自定义事件
 事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
 vm.$once(事件, callback )
 监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就 
 会被移除。
 Event.$off( [event, callback] )
 移除自定义事件监听器。
 如果没有提供参数，则移除所有的事件监听器；
 如果只提供了事件，则移除该事件所有的监听器；
 {string | Array<string>} event (只在 2.2.2+ 支持数组)

<div id="itany">
    <my-a></my-a>
    <my-b></my-b>
    <my-c></my-c>
</div>
<template id="a">
  <div>
    <h3>A组件：{{name}}</h3>
    <button @click="send">将数据发送给C组件</button>
  </div>
</template>

<template id="b">
  <div>
    <h3>B组件：{{age}}</h3>
    <button @click="send">将数组发送给C组件</button>
  </div>
</template>

<template id="c">
  <div>
    <h3>C组件：{{name}}，{{age}}</h3>
  </div>
</template>
<script>
var Event = new Vue();//定义一个空的Vue实例
var A = {
    template: '#a',
    data() {
      return {
        name: 'tom'
      }
    },
    methods: {
      send() {
        Event.$emit('data-a', this.name);
      }
    }
}
var B = {
    template: '#b',
    data() {
      return {
        age: 20
      }
    },
    methods: {
      send() {
        Event.$emit('data-b', this.age);
      }
    }
}
var C = {
    template: '#c',
    data() {
      return {
        name: '',
        age: ""
      }
    },
    mounted() {
     Event.$on('data-a',( name )=> {
         this.name = name;
     })
     Event.$on('data-b',(age )=> {
         this.age = age;
     })
    }
}
var vm = new Vue({
    el: '#itany',
    components: {
      'my-a': A,
      'my-b': B,
      'my-c': C
    }
}); 
</script>

5、attrs/listeners(用于多级组件嵌套需要传递数据时，仅仅是传递数据，而不做中间处理可以使用，只读取非props定义的数据，)https://www.cnblogs.com/shaozhu520/p/10926647.html；
isteners(用于多级组件嵌中 跨级调用方法，子级、夫级 、爷级，比如,子级调用爷爷级的方法)https://blog.csdn.net/qq_42540989/article/details/102936853?utm_term=listeners%E4%BD%BF%E7%94%A8vue&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2
多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。
两者都是跨级通讯，
6、provide/inject(允许子子孙孙组件读取最高级组件的数据，provide与inject 可以实现数据响应式)

7. children与 ref(这两种方法的弊端是，无法在跨级或兄弟间通信)

8、插槽不知道是不是，也可以传参。

插槽

一、插槽的作用
组件最大的特点就是复用性，抽取共性的部分，不同的部分由使用者提供
使用者可以决定组件内部的内容。
方式1：基本使用,匿名插槽

<div id="app">
 <!-- 调用组件 --> 
   <cld>
       插槽内容 插槽内可以包含任何模板代码，包括 HTML:甚至其它的组件
   </cld>
</div>
<!-- 组件内容 --> 
<template id="child">
 <div>
  子组件内容
  <slot></slot>显示"插槽内容"
 </div>
</template>

方式2：添加默认值
给插槽内添加默认值，使用组件时，插槽没有填入内容就会展示默认内容，如果使用组件时传入插槽内容，就会展示对应的内容。

<div id="app">
   <!-- 调用组件 --> 
   <cld>
     插槽内容 插槽内可以包含任何模板代码，包括 HTML:甚至其它的组件
   </cld>
</div>
<!-- 组件内容 --> 
<template id="child">
   <div>
      子组件内容
      <slot>默认内容</slot> //默认内容是插槽后备内容，当父级组件中使用 <cld> 并且不提供任何插槽内容时启用插槽内容，有则覆盖后背内容
   </div>
</template>

此时页面展示 默认内容。
但是调用组件组件标签有东西，会覆盖默认插槽内容，如：

<div id="app">
   <!-- 调用组件 --> 
   <cld>
       传入插槽内容
  </cld>
</div>

<!-- 组件内容 --> 
<template id="child">
   <div>
    子组件内容
      <slot>默认内容</slot>  
   </div>
</template>

此时页面展示 传入插槽内容
方式3：具名插槽-slot 插槽必须绑定 name 属性。
具名插槽就是有具体名字的插槽，基本用法为：
使用组件时，插槽内容需要添加slot属性。
通过slot属性来指定，这个slot的值必须和下面的slot组件的name值对应上，现在 <h2> 元素中的内容都将会被传入对应的具名插槽。任何没有被包裹再带有 v-slot 的内容都会被视为默认插槽的内容,插入默认插槽(<slot>默认内容</slot> )。

<!-- 组件调用 -->
<div id="app">
 <cld>
  <!--匿名插槽-->
 <div>  没有插槽内容</div>
 <span v-slot:default> 没有插槽内容</span>
 <template v-slot="title">//v-slot="title"这个会当成默认作用域 等同于 v-slot:default="title，以前是具名插槽的写法
     <div>title</div>
 </template>
  <!--这仨个都一样都是默认插槽，只能保留一个--
  <!--具名插槽 缩写#title-->
  <h2 v-slot:title>标题</h2> 
 </cld>
</div>

<!-- 子组件内容 -->
<template id="child">
 <div>
  <slot name="title"></slot> 
  子组件内容
  <slot>默认内容</slot>  
 </div>
</template>

三、作用域插槽
我们经常通过父组件给子组件传递展示内容，但是作用域插槽刚好相反，把数据从子组件传来，父组件通过v-slot:default="slotProps"或者v-slot="slotProps"接收匿名插槽数据；v-slot:other="otherSlotProps"接收具名插槽数据。

//注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确
<!-- 父组件使用  -->
<cld >
    <!--slotProps可以自定义-->
    <!--匿名插槽-->
    <template v-slot="slotProps"> 
         <div>
           获取数据匿名插槽数据
           {{slotProps.data[0]}}
       </div>
    </template >
    <template v-slot:default="slotProps">
         <div>
           获取数据匿名插槽数据
           {{slotProps.data[0]}}
       </div>
    </template >
   <!--具名插槽other和otherSlotProps可以自定义-->
    <template v-slot:other="otherSlotProps">
       <div  >
         获取具名插槽数据
         <li v-for="item in otherSlotProps.data">{{item}}</li>
       </div>
   </template> 
</cld>

<!-- 子组件内容 -->
<template id="child" >
 <div>
    <slot name="other" :data="color"></slot> 
    <slot  :data="name"></slot> 
 </div>
</template>
<script>
export default{
 data(){
  return{
    color:['red','oranage','yellow','green'],
    name:[6],
   }
  }
}
</script>

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃
https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD

 slot="" == v-slot = ""
 //默认插槽：
 <span v-slot:default> 没有插槽内容</span>//default说明是默认插槽，组件标签里的内容不使用v-slot也是默认插槽
 slot-scope="slotProps" == v-slot="slotProps" == v-slot:default="slotProps"

pinia
vuex:https://www.jianshu.com/p/a86431e88010