vue3.x第三方插件mitt实现跨组件传值

Vue3.x以后从实例中移除了 $on，$off 和 $once 方法，$emit 仍然是现有 API 的一部分，只能实现子组件触发父组件的方法。

mitt插件地址：
https://github.com/developit/mitt

使用mitt之前先安装mitt模块

npm install --save mitt

使用案例：
1、新建model/event.js

import mitt from 'mitt'
const VueEvent = mitt();
export default VueEvent;

2、Header组件

<template>
    <button @click="doLogin">非父子组件传值</button>
</template>

<script>
import VueEvent from '../model/event'
export default {
    data() {
        return {
            msg: ''
        }
    },
    methods: {
        doLogin() {
            VueEvent.emit("login", this.msg);
        }
    }
}
</script>

3、Login组件

<template>
我是用户登录组件
</template>
<script>
import VueEvent from '../model/event'
export default {  
    mounted() {
        VueEvent.on("login", (data) => {
            alert(data)
        })
    }
}
</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！