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

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

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

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

使用mitt之前先安装mitt模块
1npm install --save mitt
使用案例:
1、新建model/event.js
1import mitt from 'mitt'
2const VueEvent = mitt();
3export default VueEvent;
2、Header组件
01<template>
02    <button @click="doLogin">非父子组件传值</button>
03</template>
04 
05<script>
06import VueEvent from '../model/event'
07export default {
08    data() {
09        return {
10            msg: ''
11        }
12    },
13    methods: {
14        doLogin() {
15            VueEvent.emit("login", this.msg);
16        }
17    }
18}
19</script>
3、Login组件
01<template>
02我是用户登录组件
03</template>
04<script>
05import VueEvent from '../model/event'
06export default
07    mounted() {
08        VueEvent.on("login", (data) => {
09            alert(data)
10        })
11    }
12}
13</script>