eventBus使用遇到的坑

**问题:**通过eventBus传递的参数,在子组件的methods中无法通过this.使用。

**思路:**考虑组件方法的执行顺序(vue生命周期执行顺序)

**解决办法:**在传递参数的组件外 this.$nextTick

复制代码
this.$nextTick(() => {
    Bus.$emit('updateOpt', opt, item)
})

eventBus的使用

  1. 创建eventBus.js文件
  2. 在需要传递消息的兄弟组件引入该js文件
  3. 传递消息 bus.$emit("test",param1,param2...)
  4. 接收消息 bus.$on("test",funciton({ //逻辑 }))

代码如下:

复制代码
<!-- 父组件 -->
<template>
    <div>
        <a></a>
        <b></b>
    </div>
</template>

<script>
import a from "./ePassList/a.vue";
import b from "./ePassEdit/b.vue";
export default {
    components: {
        a,
        b,
    },
}
</script>

<style>

</style>

//eventBus.js文件
import Vue from 'vue'

export default new Vue()

<!-- 子组件a 传递消息import Bus from "../eventBus.js"; Bus.$emit('updateOpt', opt, item) -->
<template>
    <div>
        <el-table :data="dataList" size="small" v-loading="loading" border :header-cell-style="{
            color: '#495060',
            'background-color': '#f8f8f9',
        }" style="border: 1px solid #dddee1">
            <el-table-column type="index" label="序号" width="90" align="center">
            </el-table-column>
            <el-table-column prop="activity_name" label="活动名称" align="center">
            </el-table-column>
            <el-table-column prop="activity_type" label="活动类型" align="center">
            </el-table-column>
            <el-table-column prop="activity_publisher" label="发布人" align="center">
            </el-table-column>
            <el-table-column prop="insert_time" label="发布时间" align="center">
            </el-table-column>
            <el-table-column prop="update_time" label="更新时间" align="center">
            </el-table-column>
            <el-table-column prop="action" label="操作" align="center" fixed="right">
                <el-row slot-scope="scope">
                    <Button type="primary" size="small" @click="operate('editOpt', scope.row)">编辑</Button>
                    <Button type="primary" size="small" @click="operate('detailOpt', scope.row)">详情</Button>
                    <Button type="primary" size="small" @click="onDelete(scope.row)">删除</Button>
                </el-row>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import Bus from "../eventBus.js";
export default {
    methods: {
        //编辑,详情
        operate(opt, item) {
            console.log(opt, item);
            this.$emit('toEdit')
            this.$nextTick(() => {
                Bus.$emit('updateOpt', opt, item)
            })
        },
    }
};
</script>

<style></style>

<!-- 子组件b 接收消息import Bus from "../eventBus.js"; Bus.$on("updateOpt", () => {}); -->
<template></template>

<script>
import Bus from "../eventBus.js";
export default {
    data() {
        return {
            operate: "",
            rowData: "",
        }
    },
    created() {
        Bus.$on("updateOpt", (opt, item) => {
            console.log(opt, item, 11111);
            this.operate = opt;
            this.rowData = item;
        });
    },
    methods:{
        print(){
            console.log(this.operate,this.rowData)
        }
    }
};
</script>

<style></style>

涉及到的知识点:nextTick()

nextTick(),是将回调函数延迟在下一次DOM更新数据过后进行调用。

简单的理解就是:当数据更新之后,DOM进行渲染之后将会自动进行执行该函数。

详细解读链接:https://juejin.cn/post/6971017407733170184

相关推荐
Q_9709563916 分钟前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员30 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘35 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出37 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的37 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解40 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵43 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im44 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man44 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构