Vue中的的通信方式有几种?

vue中的主要通信方式如下：

1. props/$emit 适用父子组件通信
2. ref与parent/children适用父子组件通信
3. EventBus(事件总线) 适用于父子、隔代、兄弟组件通信
4. attrs/listeners 适用于隔代组件通信
5. provide/inject 适用于隔代组件通信
6. vuex 适用于父子、隔代、兄弟组件通信
7. slot插槽方式

父组件通过props向子组件传参

1、props写在子组件，创建一个属性，用来接收父组件传过来的值
2、父组件注册子组件，
import 一下 components{}一下，
3、在父组件div中使用，及注册子组件，添加子组件props中创建的属性
4、把需要传给子组件的值赋值给该属性

example

父组件：
在HTML页面采用驼峰式加载子组件，
<snowModuleType :productSource="productSource"></snowModuleType>
引入该组件
import snowModuleType from "./snowModuleType.vue"; 
注册组件
export default {
    components:{
        snowModuleType 
    }
}
初始化参数
data(){
    return {
        productSource:'',
    }
}
在watch中监听select的v-model值，并且将值传递给子组件
<el-select v-model="snowtype" placeholder="请选择" style="font-size:12px">
    <el-option
      v-for="item in snowProductType"
      :key="item.value"
      :label="item.name"
      :value="item.value">
    </el-option>
  </el-select>

 watch: {
    snowtype(val){
      this.productSource = val;
    },
  } 

子组件：
创建子组件.vue
props接受父组件传值参数
export default {
  props: {
    productSource: {
      type: String,
      default: 'SAC',
    },
  },
}  
在watch中监听传值，val即为父组件穿过来的参数，this.getSnowProdutType(val)方法为接口方法
 watch: {
    productSource(val){
       this.getSnowProdutType(val);
    }
  } 
在方法中调接口，实现父组件参数传参
  methods: {
    getSnowProdutType(val){
   		........
    },
 }   

子组件通过$emit向父组件传值

1、类似父传子，子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2、emit(参数1,参数2)方法,将子组件的参数2传递给父组件，父组件通过@参数1='方法’接收子组件的参数2的值。
在子组件中方法里面，将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法，第一个参数即为父组件中标签上绑定的属性，例如自定义点击事件
3、在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听，类似父传子中在父组件添加props里面的属性

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性

example

子组件：
创建子组件.vue
通过this.$emit() 传递数据给父组件
单一变量传参：首先在watch中监听某个数据，当数据变化时执行this.getTypeData(val)方法，也可以直接@click某个方法，写在方法中
 watch: {
    produtType(val){//v-model的变量名
      this.getTypeData(val);
    }
  }  
type-data为自定义事件，在父组件中使用
 methods: {
    getTypeData(val){
      this.$emit('type-data',val);//val即为子组件要传递的父组件的数据
    },
  }  
父组件：
在HTML页面采用驼峰式加载子组件， @type-data即为子组件的自定义事件
<snowModuleType @type-data="typeData"></snowModuleType>
引入该组件
import snowModuleType from "./snowModuleType.vue";
注册组件
export default {
    components:{
        snowModuleType 
    }
}


在方法中使用自定义事件，触发后对val进行操作，可以赋值等
typeData(val) {
      this.snowEmitType = val;
    },

当接收多个参数时，父组件可以添加相同个数接收参数即可

typeData(value1,value2) {
      console.log(value1);//即为子组件this.regionId的值
      console.log(value2)//子组件this.status的值
    },

也可通过arguments可以一次性同时接收子组件多个参数，并且可以自定义父组件参数

<snowModuleType  @type-data="typeData(arguments,newArgs)"></snowModuleType>
arguments以数组形式接收
typeData(value1,value2) {
      console.log(value1);//打印出来是数组
      console.log(value1[0])//子组件this.regionId的值
      console.log(value2)//父组件自定义的值
    },

vue中子组件调用父组件的方法

1、通过emit子组件向父组件触发一个事件，父组件监听
2、直接在子组件中通过 this.$parent.event来调用父组件的方法
3、父组件把方法传入子组件，在子组件中直接调用这个方法

非父子组件通信方法 $emit $on，
Vue2.x 使用 EventBus 进行组件通信，而 Vue3.x 推荐使用 mitt.js

兄弟组件之间传递 mitt在vue3中的使用事务总线

npm install --save mitt

方式1，全局总线，vue 入口文件 main.js 中挂载全局属性。

import mitt from 'mitt'

app.config.globalProperties.$mybus = mitt()

方式2，封装自定义事务总线文件 mybus.js，创建新的 js 文件进行导入使用。

import mitt from 'mitt'

export default mitt()

全局使用，emit存储修改；
clickTitle(value) {
      this.$mybus.emit('getPdata',value.prodEname);
     };
通过on进行获取监听使用；
this.$mybus.on("getPdata", info => {
      this.prodEname = info;
      this.initgetdayDelay(this.prodEname);
    });

****this.$mybus.on事件可以写在mounted中，this.$mybus.emit事件触发改变了getPdata的值后on事件会监听到立刻执行。

隔代组件的通信，未完待续。。。