Vue3全局组件通信之EventBus

参考博客：Vue3全局组件通信之EventBus

1、安装 mitt

npm install --save mitt

2、在 main.js 全局引入

import mitt from 'mitt';
app.config.globalProperties.mittBus = mitt();

3、页面内使用方法

import { onMounted, ref, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
//注册监听事件，接收传参
proxy.mittBus.on('visitDataTimeLine', (data) => {
   visitId.value = data.visitId; 
});
//调用方法传递数据
proxy.mittBus.emit('visitDataTimeLine',data);
//移除监听事件
proxy.mittBus.off('visitDataTimeLine');

4、使用举例

传递数据：

<template>
    <div class="wrap">
        <iframe
        ref="frameSelect"
        :src="htmlSrc"
        width="100%"
        height="100%"
        frameborder="0">
        </iframe>
        <!-- <button @click="vueSendMsg">vue向iframe传递信息</button>
        <button @click="iframeMethods">触发iframe中的方法</button> -->
    </div>
</template>

<script>
import { onMounted, ref, getCurrentInstance } from 'vue';
export default {
  setup() {
    const instance = getCurrentInstance();
    const htmlSrc = ref('static/index.html');
    onMounted(() => {
      const iframe = getCurrentInstance().refs.frameSelect;
      //html里写window.parent.postMessage(res, '*');) 传数据过来
      window.addEventListener('message', (event) => {
        if (event.source === iframe?.contentWindow) {
          instance.message = event.data; // 接收html的数据
          instance.proxy.mittBus.emit('visitDataTimeLine', instance.message); // 传递数据
        }
      });
    });
    return {
      htmlSrc,
    };
  },
};
</script>

接收数据：

<template>
    <div class="frameContent">
        <div class="position">
            <div class="title">主车：</div>
            <div class="contentCoord">
                <div class="content">
                <div class="titleCoord">
                    x ： {{ data.datax }}
                </div>
                <div class="slisd">
                    <slisd :min="-50" :max="10" :value="data.datax" :isDrag="true" bgColor="#5caee5"></slisd>
                </div>
            </div>
            <div class="content">
                <div class="titleCoord">
                    y ： {{ data.datay }}
                </div>
                <div class="slisd">
                    <slisd :min="110" :max="120" :value="data.datay" :isDrag="true" bgColor="#5caee5"></slisd>
                </div>
            </div>
            <div class="content">
                <div class="titleCoord">
                    z ： {{ data.dataz }}
                </div>
                <div class="slisd">
                    <slisd :min="-50" :max="10" :value="data.dataz" :isDrag="true" bgColor="#5caee5"></slisd>
                </div>
            </div>
            </div>
            <button>渲染</button>
        </div>
    </div>
</template>

<script>
import slisd from './slisd.vue'; // 进度条组件，不重要
import { onMounted, ref, reactive, getCurrentInstance } from 'vue';
import jsonFile from '../assets/data/extrinsic.json';
export default {
  components: { slisd },
  setup() {
    const instance = getCurrentInstance();
    const frame = ref(0);
    const positionData = ref([]);
    const data = reactive({
      datax: instance.proxy.datax,
      datay: instance.proxy.datay,
      dataz: instance.proxy.dataz,
    });
    const fetchData = () => { // 这个是读取json文件的，不重要
      try {
        if (Array.isArray(jsonFile)) {
          positionData.value = jsonFile.map(row => row.map(num => parseFloat(num)));
          data.datax = positionData.value[frame.value][0];
          data.datay = positionData.value[frame.value][1];
          data.dataz = positionData.value[frame.value][2];
        }
      } catch (error) {
        console.error('Error fetching JSON data:', error);
      }
    }; 
    onMounted(() => {
      instance.proxy.mittBus.on('visitDataTimeLine', (data) => {
        frame.value = data; // 接收数据
        fetchData();
      });
    //   fetchData();
    });
    return {
      data,
      frame: frame.value,
    };
  },
}; 
</script>