首页 > 建站教程 > 前端框架 >  vue3.x第三方插件mitt实现跨组件传值正文

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>