eventBus使用遇到的坑

这篇具有很好参考价值的文章主要介绍了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文章来源地址https://www.toymoban.com/news/detail-620160.html

到了这里,关于eventBus使用遇到的坑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用vite打包时候遇到的坑

    最近使用vite写了一个小demo. 记录下其中感悟和遇到的\\\"坑\\\" 开发: 使用vite的开发过程还是很爽的 vite快速生成各种已经搭好的脚手架供开发者选择 开发的运行速度相对于传统的webpack确实快了不少 打包: 在打包的时候遇到了一些坑 打包时资源的路径问题,跟vue-cli里面一样,需要修

    2024年02月04日
    浏览(52)
  • 前端vue打包时遇到‘default‘ is not exported by node_modules/vue/dist/vue.runtime.esm-bundler.js, imported by

    主要原因是由于用到的组件进行npm i时默认使用的是vue2,不支持vue3,但是前端框架使用的是vue3,所以导致重构编码时会报错, 网上查询说         当我们在使用rollup编译es6时,可能会遇到以下报错问题,需要 安装@rollup/plugin-commonjs插件 npm install @rollup/plugin-commonjs 最后,

    2024年02月05日
    浏览(62)
  • IIS部署vue前端过程(含IIS及相关配置和安装),部署遇到的问题及报错(承接vueconfig.js全局配置环境变量,跨域问题)

    目录 一.IIS使用安装。 二.部署准备工作 三.部署前端(以vue为主) 四.问题与报错 1.HTTP 错误 404.0 - Not Found(需重写路由入口) 2.请求调用不了(需要重写请求地址) 3.地址显示undefined 第一步,打开“ 控制面板 ”,点击“ 网络和Internet ”。 第二步,点击左侧“ 程序 ”,然后点击

    2024年02月08日
    浏览(66)
  • elasticsearch 中热词使用遇到的坑

    在使用es检索时,一般会创建索引以及索引下mapping和setting一样配置,如下: 命令创建配置方式: PUT /my_index {   \\\"settings\\\": {     \\\"number_of_shards\\\": 1   },   \\\"mappings\\\": {     \\\"properties\\\": {       \\\"title\\\": {         \\\"type\\\": \\\"text\\\"       },       \\\"releaseTime\\\": {         \\\"type\\\": \\\"date\\\"

    2024年01月19日
    浏览(42)
  • 关于navigator.clipboard.writeText使用遇到的坑

    navigator.clipboard.writeText在http协议下不可用的坑,浏览器禁用了非安全域的  navigator.clipboard  对象,安全域包括本地访问与开启TLS安全认证的地址,如  https  协议的地址、 127.0.0.1  或  localhost  。(其实主要是http属于非安全域)下面的方法属于兼容了http的

    2024年02月03日
    浏览(47)
  • vue前端预览pdf并加水印、ofd文件,控制打印、下载、另存,vue-pdf的使用方法以及在开发中所踩过的坑合集

    根据公司的实际项目需求,要求实现对pdf和ofd文件的预览,并且需要限制用户是否可以下载、打印、另存pdf、ofd文件,如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单,直接调用浏览器的预览就可以而且功能也比较全,但是一

    2024年02月16日
    浏览(172)
  • Jenkins Pipline使用SonarScanner 检查 VUE、js 项目 中遇到的Bug

    在 Jenkins 上使用 Pipline 进行集成,利用 SonarScanner 做静态代码扫描的过程中,遇到了几个问题,这里记录了一点解决办法。 自动安装 SonarScanner 插件,在 Pipline 脚本中使用官方 wiki 中说明的脚本: 但是在扫描的时候总是报错,可以看出是语法错误: 因为在 stage 里面不是用

    2024年02月16日
    浏览(47)
  • 小程序页面跳转使用reLaunch遇到的坑

    开发的当前功能总共有4个页面1.2.3.4其中1为首页2为列表页3为详情页4为退货详情页 跳转顺序需要4--2 实现方式:1.redirectTo 【关闭当前页面跳转到目的页面,会造成多个列表页的关闭情况】  wx.redirectTo({        url: \\\'/packagePos/pages/pos/delivery/deliveryOrder/deliveryOrder\\\',      });

    2024年02月08日
    浏览(43)
  • 开发小程序使用 vant 遇到的坑 vant popup

    目录 vant popup vant Popover   小程序中H5页面使用van-uploader上传图片安卓手机调取相机失效问题 小程序上的vant用的是跟网页版的不一样的方法,网页版的可以使用v-model,但是小程序的要用\\\"show\\\"属性来控制显示与否。   由于是用show属性来控制,所以需要写一个close方法,这样一

    2024年02月13日
    浏览(50)
  • 项目搭建使用qiankun(乾坤),入门篇,以及遇到的坑与解决

    微前端架构具备以下几个核心价值: 技术栈无关 主框架不限制接入应用的技术栈,微应用具备完全自主权 独立开发、独立部署 微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新 增量升级 在面对各种复杂场景时,我们通常很难对一个已经存在的系统

    2024年02月12日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包