vue2非父子传值

最新推荐文章于 2025-11-28 09:44:01 发布

原创最新推荐文章于 2025-11-28 09:44:01 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue2 #前端

该文章演示了如何在Vue.js中使用事件总线（Bus）进行非父子组件间的通信。通过创建一个全局Vue实例作为总线，组件1使用$emit发送数据，而组件2在创建后使用$on监听并接收数据。强调了$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>Document</title>
</head>

<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id="myApp">
        <my-com1></my-com1>
        <hr>
        <my-com2></my-com2>

    </div>
    <!-- 组件模板 -->
    <template id='myTem1'>
        <div>
            组件1发数据: <button @click="change">{{count1}}</button>
        </div>
    </template>
    <template id='myTem2'>
        <div>
            组件2接数据:{{count2}}
        </div>
    </template>
    <script>

        // 第一步:在全部范围内,创建一个vue空对象,取名为bus总线
        var bus = new Vue()

        Vue.component('myCom1', {
            template: '#myTem1',
            data() {
                return {
                    count1: 0

                }
            },
            methods: {
                change() {
                    this.count1++;
                    console.log("1数据发送", this.count1);
                    // 第二步:需要发送数据的时候,使用bus总线调用$emit()发送,而不是this
                    bus.$emit("myevent", this.count1)

                }
            }
        })
        Vue.component('myCom2', {
            template: '#myTem2',
            data() {
                return {
                    count2: 0
                }
            },
            created() {
                // 第三步:在目标组件的初始化函数中,使用bus总线监听自定义事件,获取数据
                bus.$on("myevent", data => {
                    console.log("2数据接收", data);
                    this.count2 = data;
                })


                // 假设初始化的时候 组件2没有创建 10秒之后组组件2才创建出来,用计时器模拟
                setTimeout(() => {
                    console.log("模拟组件2延迟初始化,开始监听事件");
                    // $on监听事件可以重复监听,事件处理函数都会执行
                    bus.$on("myevent", data => {
                        console.log("3数据接收", data);
                        this.count2 = data;
                    })

                }, 10000);

                // 结论:10秒内:组件2还没有初始化,组件1发射事件,就接收不到,因为事件必须先on绑定,在emit发射,才能正常触发事件
            },

        })
        new Vue({
            el: '#myApp',
            data: {

            },
            methods: {

            },
        })

        // 总结:非父子组件(兄弟组件)传值的步骤
        // 1.全局范围内创建一个vue空对象,取名为bus总线
        // 2.使用bus总线调用$emit发送
        // 3.在目标组件的初始化函数中,使用bus总线监听自定义事件,获取数据
        // 注意事项:
        // 1.使用bue总线接收数据的时候,事件处理函数要使用箭头函数来写,保证this指向为当前组件对象
        // 2.bus.$on 监听必须在bus.$emit发送之前执行,才能触发事件,接收数据
    </script>
</body>

</html>