Vue2:用ref方式绑定自定义事件的注意事项

一、场景描述

我们知道绑定自定义事件可以用ref方式实现。
但是,这个方式,需要注意下,否则,实现不了我们的效果。

需求是这样的,我们通过ref绑定的事件,来给Appdata块中的变量赋值。

二、绑定自定义事件

基本写法:
父组件App
methods函数:

getStudentName(name,...params){console.log('App收到了学生名:',name,params)this.studentName = name
}

Student组件绑定自定义事件test

        mounted() {this.$refs.student.$on('test',this.getStudentName) //绑定自定义事件(一次性)}

此处的this是谁了?
其实,是Student组件的vc实例。Vue约定,谁触发的事件,那么,这个this就是谁。
但是,此处的this调用的函数,在App组件的methods中,所以,在getStudentName函数中的this,又变成了App组件的vc实例。

无效写法

            this.$refs.student.$on('test',function () {console.log('App收到了学生名:',name,params)this.studentName = name})

原因就是,此时function里面的thisStudentvc实例,无法获取到studentName变量,所以,赋值失败。

改进写法:

            //这种写法,可以给studentName变量赋值。this.$refs.student.$on('test',(name,...params) => {console.log('App收到了学生名:',name,params)this.studentName = name})

换成箭头函数,就可以实现基本写法的效果。为什么了?
因为,箭头函数没有自己的this,于是,Vue需要向外部寻找,这是,找到的this就是App组件的vc实例。
从而实现对studentName变量的赋值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/634606.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java:流程控制

一、流程控制语句分类 顺序结构分支结构(if,switch)循环结构(for,while,do...while) 二、顺序结构 定义:顺序结构是程序中最基本的流程控制,没有特定的语法结构&#…

[latex]将表格中\cmidrule加粗

在写论文时,偶尔会出现需要使用 \cmidrule 代替 \bottomrule 和 \toprule 的时候,但是苦于无法对\cmidrule进行加粗。解决方法: 在LaTeX中,\cmidrule默认没有直接设置线宽的选项,但读者可以通过一些技巧实现。以下是一…

Midjourney

知数云 | 数字化服务的智慧之选 Midjourney是一款AI制图工具,只要输入关键字,透过AI算法就能生成相对应的图片。 使用Spring接口与Midjourney官方API交互涉及几个步骤。首先,确保你已经在Midjourney官方网站上注册了账户并获取了API密钥。 …

Sqoop故障排除指南:处理错误和问题

故障排除是每位数据工程师和分析师在使用Sqoop进行数据传输时都可能遇到的关键任务。Sqoop是一个功能强大的工具,但在实际使用中可能会出现各种错误和问题。本文将提供一个详尽的Sqoop故障排除指南,涵盖常见错误、问题和解决方法,并提供丰富的…

leetcode-杨辉三角

118. 杨辉三角 题解: 首先,我们需要创建一个二维列表,用于存储杨辉三角的每一行。然后,我们初始化第一行和第二行,因为杨辉三角的前两行是固定的。接下来,我们使用一个循环,从第三行开始&…

HarmonyOS4.0系列——07、自定义组件的生命周期、路由以及路由传参

自定义组件的生命周期 允许在生命周期函数中使用 Promise 和异步回调函数,比如网络资源获取,定时器设置等; 页面生命周期 即被Entry 装饰的组件生命周期,提供以下生命周期接口: onPageShow 页面加载时触发&#xff…

2023年上半年网络工程师真题(3/3)

41.某主机无法上网,查看本地连接后,发现只有发送包没有接收包,故障原因可能是(C)。 A.网线没有插好 B.DNS配置错误 C.IP地址配置错误 D.TCP/IP协议故障 如果网线没有插好,就没有发送包没有接收包;DNS配…

UI设计中的插画运用优势(上)

1. 插画是设计的原创性和艺术性的基础 无论是印刷品、品牌设计还是UI界面,更加风格化的插画能够将不同的风格和创意加入其中,在激烈的竞争中更容易因此脱颖而出。留下用户才有转化。 2. 插画是视觉触发器,瞬间传达大量信息 我们常说「一图胜千…

Skydel 23.8新版本发布!GNSS模拟器完成首项实地路测项目

奥本大学自动驾驶团队运用GNSS模拟器完成首项实地路测项目 奥本大学与最近与阿拉巴马州伯明翰的巴伯赛车运动公园合作进行道路测试,该车在没有任何人工干预的情况下成功绕赛道完成了一圈,这也是印地自动驾驶挑战赛中车辆首次在美国专业赛道上完成一圈。…

unity-shader笔记OLD

shader shader在面板中的位置相关代码代码切换shader shader在面板中的位置 选中物体属性面板中 相关代码 代码切换shader 挂载到怪物上的shader名字统一叫body,然后获取上面的SkinnedMeshRender SkinnedMeshRender smr; //恢复到原来的shader …

智能驾驶新浪潮:SSD与UFS存储技术如何破浪前行?- SSD篇

随着汽车行业的不断发展,对存储的需求也在不断的变化中。早期阶段的汽车对存储的需求主要是收音机、播放器、导航仪等,有些还可以支持光盘和U盘的外接播放。中期阶段,也是当前主流的燃油车行车记录、多媒体、车联网的需求,对存储性…

大数据开发之Hadoop(优化新特征)

第 1 章:HDFS-故障排除 注意:采用三台服务器即可,恢复到Yarn开始的服务器快照。 1.1 集群安全模块 1、安全模式:文件系统只接收读数据请求,而不接收删除、修改等变更请求 2、进入安全模式场景 1)NameNod…

【ARM 嵌入式 编译系列 2.2 -- GCC 编译参数学习 assembler-with-cpp 使用介绍】

文章目录 GCC 编译选项 assembler-with-cpp GCC 编译选项 assembler-with-cpp 在 rt-thread 的编译脚本中经常会看到下面编译参数: AFLAGS -c DEVICE -x assembler-with-cpp -Wa,-mimplicit-itthumb arm-none-eabi-gcc 是针对 ARM 架构的交叉编译器&#xff…

国考省考行测:语句排序2刷题

国考省考行测:语句排序2刷题 2022找工作是学历、能力和运气的超强结合体! 公务员特招重点就是专业技能,附带行测和申论,而常规国考省考最重要的还是申论和行测,所以大家认真准备吧,我讲一起屡屡申论和行测的重要知识点…

肯尼斯·里科《C和指针》第6章 指针(6)编程的练习:查找字符

1.编写一个函数,它在一个字符串中进行搜索,查找在一个给定字符集合中出现的所有字符。这个函数的原型如下: char *find_char( char const *source, char const *chars ); 它的基本想法是查找source字符串中匹配chars字符串中任何字符的第1个…

软件是什么?前端,后端,数据库

软件是什么? 由于很多东西没有实际接触,很难理解,对于软件的定义也是各种各样。但是我还是不理解,软件开发中的前端,后端,数据库到底有什么关系呢! 这个问题足足困扰了三年半,练习时…

Facebook营销避免封号秘诀

随着数字营销的崛起,Facebook成为企业推广的重要平台。然而,在使用Facebook进行营销时,不少企业面临封号的风险。本文将分享一些避免封号的秘诀,帮助您在Facebook上安全地进行营销活动。 一、遵循Facebook规定 在进行Facebook营…

VUE 中的 v-for 和 v-if 是否可以共存

VUE 中的 v-for 和 v-if 是否可以共存 前言1、面试经2、正确回答3、总结总结: 前言 要成功,先发疯,头脑简单往前冲! 三金四银,金九银十,多学知识,也不能埋头苦干,要成功&#xff0c…

获取编译工具链默认的链接脚本

1、ld命令使用“–verbose”参数 命令:riscv64-linux-gnu-ld --verbose想使用自己的链接脚本,链接时使用“-T”指定

Linux 压缩解压

.tar (注:tar是打包,不是压缩!) 解包:tar xvf FileName.tar -C DirName打包:tar cvf FileName.tar DirName .gz 解压1:gunzip FileName.gz解压2:gzip -d FileName.gz压…