后台项目中$emit的使用实战笔记

最新推荐文章于 2024-09-06 22:20:29 发布
最新推荐文章于 2024-09-06 22:20:29 发布
阅读量76 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mmOmm_/article/details/123523829
版权
本文介绍了在前端开发中，如何通过Vue.js实现父子组件之间的交互。具体场景是，当点击子组件的取消按钮时，利用$emit触发事件并传递参数，父组件监听该事件并调用相应方法，根据接收到的参数改变场景，从而回到父组件的界面。这一过程涉及到组件通信、事件绑定和方法定义等关键步骤。
摘要由CSDN通过智能技术生成

                                                                        图1

                                                                         图2

                                                                        图3

场景：点击子组件取消按钮，回到父组件的界面

scene 属性为1 2 3 代表3个不同的页面场景

方法：图1先给子组件定义点击事件名称和传入参数$emit(‘changeScene’，0)

           图2给父组件绑定子组件的事件并定义方法名为changeScene

           图3定义方法传入子组件带的参数0 让场景变为0（展示父组件的界面）

mmOmm_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
$emit
JankoY的博客
02-27 336
我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！ 每个 Vue 实例都实现了事件接口(Events interface)，即： 使用 $on(eventName) 监听事件 使用 $emit(eventName)触发事件 Vue.component('button-counter', { template: ` <button v-on:click="increment">{{ counter }}</button&
Vue中$emit使用
weixin_46518671的博客
03-05 367
文章目录前言一、$emit是什么？二、使用步骤1.定义一个组件2.VUE3.X中目前不支持这种写法总结 前言 vue的传值 组件间通信 提示：以下是本篇文章正文内容，下面案例可供参考 一、$emit是什么？ 是VUE子组件像父组件传值的工具 二、使用步骤 1.定义一个组件 代码如下（示例）： VUE2中传递参数 <template> <div> <input type="text" @click="come"> </div>
Vue事件总线（EventBus）、$on、$emit、$off
热门推荐
^_^
06-29 3万+
在之前我们只用过父传子，子传父进行传数据，这时候当组件嵌套比较深或比较复杂的情况，这时候就用到了事件总线 (EventBus) 如何理解事件总线呢，你可以理解为用来传输数据的一条线 一、使用EventBus 1. 创建事件总线 main.js // 创建事件总线 const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus 2.页面使用 发布事件 - 传...
uniapp项目实战笔记
youhebuke225的博客
06-13 5629
目录1 项目搭建1.1 新建项目并运行1.2 按照项目效果配置基本外观2 搭建框架2.1 配置tabbar3 从后台获取数据3.1 封装请求组件3.2 搭建后台应用4 首页页面4.1 配置首页基础数据4.2 轮播图4.3 页面中的导航 1 项目搭建 1.1 新建项目并运行 进行项目的搭建，详情点击 这里我们创建的名称为uniapp_demo 运行，这里我们看上面的详情点击就可以，初次运行注意路径的配置 当我们运行起来收的界面式这样的 1.2 按照项目效果配置基本外观 打开pages.json,
vue3基本使用笔记（汇集精华版）
weixin_66721210的博客
03-16 530
vue3基本使用笔记（汇集精华版）
vue项目实战跟练2
weixin_39513719的博客
10-23 765
通用后台管理系统跟练笔记
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
drhrht的博客
07-31 6308
但是会出现卡顿现象。当微信支付弹窗弹出，就要持续发获取订单支付状态的请求（持续是因为并不知道用户什么时候支付，所以需要持续发请求，直到能获取到支付状态），若接收到支付成功，则路由跳转至支付成功页面。项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。例如，为防止，不经过某路由就直接在地址栏输入本路由地址而跳转至本路由，导致本路由获取不到前面路由的某些数据，所以给本路由加路由独享守卫。...
千锋 Vue 详细笔记整理
embelfe_segge的博客
03-06 7911
视频笔记是根据B站 千锋 涛哥 - SpringBoot+vue+前后端分离项目《锋迷商城》实战课-完结版 进行整理的 笔记可上 gitee仓库 自取 千锋 Vue 笔记整理 一、vue 的简介 1.1 使用 JQuery 的复杂性问题 1.2 VUE 简介 1.2.1 前端框架 1.2.2 MVVM 二、 vue 入门使用 2.1 vue 的引入 2.2 入门案例 – Hello World 三、 vue 的语法 3.1 基本类型数据和字符串 3.2 对象类型数据 3.3.
vue-cli3+技术栈实战完整笔记（一）
斗师——Ace
10-06 3605
添加小程序，兑换各种视频教程/数据资源。 0. 基于vue ui创建vue cli3.0项目：参考：https://blog.csdn.net/qq_42231156/article/details/82343793。 1.项目文件vueCli3.0下： pulic文件下：favicon.ico是网址上方标题的的小图标。 index.html：是入口文件。 s...
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 357
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1309
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件
鹤渺的星球
09-05 1270
我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。
Chapter 11 脚手架Vue CLI使用步骤
2302_80253507的博客
09-06 259
Vue CLI 是 Vue.js 官方提供的一个全局命令工具，旨在帮助开发者快速创建和管理 Vue 项目。它为开发者提供了一个标准化的项目结构，并集成了 webpack 配置，使得开发过程更加高效和便利。
vue仓库的使用
weixin_58462329的博客
09-02 771
Vue仓库通常指的是使用Vue CLI创建的项目仓库，它包含了项目的所有源代码、配置文件以及依赖项。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 646
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
class 7: vue.js 3 前端工程化
ComingLiu的博客
09-03 1110
Vue.js 3
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 645
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
4.2 Sensors -- onKeyStroke
weixin_44438233的博客
09-04 518
vueuse源码分析之onKeyStroke
vue中this.$emit怎么使用
10-18
在Vue中，this.$emit用于触发当前组件实例上的自定义事件。它接受两个参数：事件名称和要传递的数据。例如，如果你想在一个按钮被点击时触发一个自定义事件，可以这样写： ``` <template> <button @click="handleClick">Click me</button> </template> <script> export default { methods: { handleClick() { this.$emit('my-event', 'some data') } } } </script> ``` 这里我们定义了一个名为'my-event'的自定义事件，并传递了一个字符串'some data'作为参数。当按钮被点击时，handleClick方法会被调用，然后通过this.$emit触发'my-event'事件，并将'some data'作为参数传递给父组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值