vue 消息总线解耦 bus.$on(), bus.$emit(), bus.$off

最新推荐文章于 2024-06-05 21:59:32 发布

Yjiokm

最新推荐文章于 2024-06-05 21:59:32 发布

阅读量685

点赞数

分类专栏： web前端文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_34581491/article/details/121068397

版权

本文详细介绍了Vue应用中如何使用消息总线（Bus）进行组件间通信，重点阐述了bus.$on用于事件监听，bus.$emit用于触发事件，以及bus.$off用于移除事件监听的方法，以此实现组件间的解耦合。通过实例代码，深入理解这一前端开发中的重要技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bus 是一个 Vue 对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <style>
        .part {
     
            position: absolute;
            height: 300px;
            width: 300px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <part1 style="top: 10px; background-color: lightskyblue;" class="part"></part1>
        <part2 style="top: 200px; left: 320px; background-color: lightsteelblue;" class