天使实例：（事件总线）兄弟组件间的传参_事件总线跨组件传参-优快云博客

本文介绍了一个使用Vue.js实现的局部组件通信案例。通过创建一个空的Vue实例作为事件总线，实现了不同层级组件间的通信。文章详细展示了如何定义组件、绑定方法及通过$emit触发事件的过程。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
</head>
<body>
<div id="app">
    <a1></a1>
</div>
<template id="f1">
    <div>
        {{name}}
        <hr>
        <c1></c1>
        <hr>
        <c2></c2>
    </div>
</template>
<template id="s1">
    <div>
        {{name}}
        <button @click="sclick">点击</button>
    </div>
</template>
<template id="s2">
    <div>
        {{name}}
    </div>
</template>
<script src="vue.js"></script>
<script>
    let angle=new Vue()//创建一个空的Vue实例作为中间桥梁
    new Vue({
        el:'#app',
        components:{
            a1:{
                template:"#f1",
                data(){
                    return{
                        name:"我是a1"
                    }
                },
                components:{
                    c1:{
                        template:"#s1",
                        data(){
                            return{
                                name:"我是子组件1"
                            }
                        },
                        methods:{
                            sclick(){
                                console.log('这是s1里的方法');
                                angle.$emit('test','hehe');
                            }
                        }
                    },
                    c2:{
                        template:"#s2",
                        data(){
                            return{
                                name:"我是子组件2"
                            }
                        },
                        methods:{
                          custom(val){//调用到方法，可以通过这个方法传参
                              console.log('我是s2的一个方法');
                              this.name=val;
                          }
                        },
                        mounted(){
                            //生命周期，挂载完成之后
                            angle.$on('test',this.custom)
                        }
                    }
                }
            }
        }
    })
    //步骤：（天使实例：事件总线）
//    1、创建一个空的Vue实例
//    2、为Vue实例绑定一个方法
//    3、只要能获得这个空的Vue实例，不管在什么地方都能通过$emit来触发这个事件
//关键地方在于 调用要修改数据组件内部的一个方法
</script>
</body>
</html>

结果截图：