eventbus 事件总线用于兄弟组件之间的通信 $on 注册事件$emit 发送事件

最新推荐文章于 2024-04-04 19:25:10 发布

SpringYoungYu

最新推荐文章于 2024-04-04 19:25:10 发布

阅读量242

点赞数

本文链接：https://blog.csdn.net/qq_44917015/article/details/116090639

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
<!-- 
    eventbus 广播 bus总线
 -->
    <div id="app">
        <div>
            <p>{{mov1}}</p>
            <first-com></first-com>
            <second-com></second-com>
        </div>
    </div>

    <template id='tem'>
        <fieldset>
            <legend>
                {{word}}
            </legend>
            <button @click='send'>给小弟</button>
        </fieldset>
    </template>
    <template id='tem1'>
        <fieldset>
            <legend>
            
                {{word}}
            </legend>
            <button @click='send'>给大哥</button>
        </fieldset>
    </template>
    <script src="../../vue.js"></script>
    <script>
        /* 事件总线的元素原理
        使用 vue 中 $on 注册事件 和 $emit 触发事件 */
        let eventbus = new Vue();//创建总线
        Vue.component('first-com', {
            data() {
                return {
                    word: '大哥'
                }
            },
            template: "#tem",
            methods: {
                send(){
                    // 使用事件总线 触发方法 并传递参数
                    eventbus.$emit("tobro",'大哥的奖赏')
                }
            },
            mounted() {
                //在生命周期函数中 注册方法
                eventbus.$on('tobig',function(e){
                    console.log(e)
                    eventbus.$off('tobig')//移除了事件监听
                })
                /* 移除事件 
                eventbus.$off('tobig',{}) */
            },
        })
        Vue.component('second-com', {
            data() {
                return {
                    word: '二哥'
                }
            },
            template: "#tem1",
            methods: {
                send(){
                    eventbus.$emit("tobig",'小弟的保护费')
                    eventbus.$emit("tobig",'二小弟的保护费')
                }
            },
            mounted() {
                //在生命周期函数中 注册方法
                eventbus.$on('tobro',function(e){
                    console.log(e)
                    eventbus.$off('tobro')
                })
            },
        })
        const vm = new Vue({
            el: '#app',
            data: {
                name: 'ycy',
                word: 'abcabcbacbcbab岁月的童话',
                mov1: "狼的孩子雨和雪"
            }
        });
    </script>
</body>

</html>

SpringYoungYu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
eventbus 事件总线用于兄弟组件之间的通信 $on 注册事件$emit 发送事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫