vue3-----事件总线与props传值的使用场景

1、事件总线vue3的写法

  import { defineComponent, reactive, ref, watch,getCurrentInstance } from 'vue'
  const instance = getCurrentInstance()
    let checkList
    if(instance){
      const bus = instance.appContext.config.globalProperties.$bus;
      bus.on('checkList', (data) => {
        checkList = data
      });
    }

 

2、如果遇到多层父子传值的情况，比如父传子再传子(就是孙子)，还是用props；因为props能在子组件渲染之前，把值传给子组件

① 温压羽流组件 =========父

<template>
  <div class="mapBac">
     <!-- 子组件  地图组件 -->
     <gisMap class="map" ref="mapComponent" :checkList="checkList"></gisMap>
  </div>
</template>
import gisMap from '/@/components/Map/map.vue'
export default defineComponent({
  components: { gisMap },
  setup(props, ctx) {
      let checkList = ["配电线路", "高压电缆", "电缆杆", "变压器", "FTU开关", "刀闸", "高压计量", "电容", "故障指示器", "变电站"];  
      return{
          checkList      
      }
  }

 ② map组件 =========子

<template>
  <!-- 子组件  图例组件 -->
  <legendBox :checkList="checkList"></legendBox>
</template>
import legendBox from "/@/components/Map/legend.vue";
export default defineComponent({
  components: { legendBox },
  props: {
    checkList:{
      type: Array<String>,
      required: false
    }
  },
  setup(props, ctx) {
      //可以直接用 props.checkList 获取父组件传过来的值
      let checkList = props.checkList;  
      return{
          checkList      
      }
  }

 ③ legend组件===============子的子(孙子)

<template>
   <el-checkbox-group v-model="checkList" @change="handleChange">
       <el-checkbox v-for="item in layerTreeData" :key="item.src" :label="item.name">
          <img :src="getIcon(item.src)" alt="电力图例">
              <span>{{ item.name }}</span>
       </el-checkbox>
   </el-checkbox-group>
</template>
export default defineComponent({
  props: {
    checkList:{
      type: Array<String>,
      required: false
    }
  },
  setup(props, ctx) {
      //可以直接用 props.checkList 获取父组件传过来的值
      let checkList = props.checkList;
      return{
          checkList      
      }  
  }

 

3、如果遇到父传子，子组件需要传过来的值动态渲染页面的情况，用props；

因为props能在子组件渲染之前，把值传给子组件，不至于在子组件渲染的时候该值是undefined