0
点赞
收藏
分享

微信扫一扫

Vxe UI vue vxe-table 虚拟树表格的使用,流畅的渲染万级数据树结构表格

老王420 2024-11-05 阅读 13

一、工作原理

事件总线,主要用来实现非父子组件之间的传值。

它的工作原理:通过new Vue()再创建一个新的 Vue 实例对象bus,将这个新的实例对象作为桥梁,来实现两个组件之间的传值。

二、工作步骤

1、创建事件总线 bus

我们可以在项目的 src 目录中,新建一个/utils/bus.js 文件,然后在该文件中,来生成 bus 对象:

import Vue from "vue";
const bus = new Vue();
export default bus;

2、设置监听器(给 bus 添加事件)

我们需要在“接收数据”的组件中,给事件总线身上添加一个事件。

import bus from "./bus.js";
export default{
    mounted() {
        // 给事件总线身上添加一个事件(箭头函数默认不会执行)
        bus.$on("getData",(data) => {
            console.log("其他组件传递的数据",data);
        })
    }
}

3、调用 bus 的事件

我们在需要“传递数据”的组件中,来调用事件总线身上的方法,同时传值:

import bus from "./bus.js";
export default{
    data() {
        return {
            num: 1,
        };
    },
    methodes: {
        postData() {
            // 调用事件总线身上的方法,同时传值
            bus.$emit('getData',this.num);
        },
    },
};

三、注意事项

在使用事件总线时,负责“接收数据”的组件,需要提前先渲染出来,执行生命周期函数,同时给事件总线添加事件。

如果“接收数据”和“传递数据”的组件是同时渲染出来的,我们就可以用事件总线来实现两个组件之间的传值。但是,如果“接收数据”的组件,比“传递数据”的组件后渲染,就不能使用事件总线。

举报

相关推荐

0 条评论