组件自定义事件

news/2024/10/25 19:31:57/

绑定

组件自定义事件跟子传递很像

 相同的是无论你使用的是props或者自定义事件,都是要使用到回调函数

子传父

 需要亲自是收一下,然后调用一下

 而自定义事件是没有给子组件传东西,只是这个当做事件的回调而已

 对比一下student并没有数据来接收,在这里你只要注意不要把事件名写错就可以了

当然,可以通过ref方式实现自定义事件的绑定

 这样能实现同样的效果,你在组件上用了ref,那么你就能通过this.$refs拿到它的实例对象,这种方法更灵活

如果你只想执行一次,可以在后面.once

如果你传的参数很多,你可以通过使用1.展开运算符...

它会把第一个参数拿出当,name用,然后其他的是保存为一个数组

2.在传的时候直接传一个参数进去就可以了 

解绑

你给谁绑定了自定义事件,那么你就去找他去解绑

这种this.$off只适合解绑一个自定义事件 

解绑多个要写在一个数组中

还有一种极端的写法:this.$off()解绑所有的自定义事件

这里要注意的是:销毁了当前Student组件的实例,销毁后所有Student实例的自定义事件全都不奏效。 

总结

如果使用@click,它只会把它当做自定义事件,除非使用.native,才会把它当做默认行为 

总结:

* 一种组件间通信的方式,适用于:`<strong style="color:red">`子组件 ===> 父组件`</strong>`
* 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(`<span style="color:red">`事件的回调在A中)。
* 绑定自定义事件:
  1. 第一种方式,在父组件中:``<Demo @atguigu="test"/>``  或 ``<Demo v-on:atguigu="test"/>``
  2. 第二种方式,在父组件中:

     ```js<Demo ref="demo"/>......mounted(){this.$refs.xxx.$on('atguigu',this.test)}```

3. 若想让自定义事件只能触发一次,可以使用 ``once``修饰符,或 ``$once``方法。
* 触发自定义事件:``this.$emit('atguigu',数据)``
* 解绑自定义事件 ``this.$off('atguigu')``
* 组件上也可以绑定原生DOM事件,需要使用 ``native``修饰符。
* 注意:通过 ``this.$refs.xxx.$on('atguigu',回调)``绑定自定义事件时,回调`<span style="color:red">`要么配置在methods中,`<span style="color:red">`要么用箭头函数,否则this指向会出问题!

todoList案例——自定义事件

将自定义属性改为自定义事件

 

 


http://www.ppmy.cn/news/34902.html

相关文章

做Vinted要注意什么?详细避坑指南参考

最近有很多人向东哥我咨询vinted这个平台&#xff0c;很多朋友都是想咨询vinted这个平台好做吗&#xff1f;主要卖什么商品好卖一点&#xff0c;有没有什么注意事项。今天东哥就一一给大家解答。 Vinted平台好做吗&#xff1f; Vinted面向的市场主要是欧美市场&#xff0c;那平…

被隐藏的过程——预处理

文章目录0. 前言1. 程序的翻译环境和执行环境2. 被隐藏的过程2.1 翻译环境2.2 编译3.2.1 预编译3.2.2 编译2.2.3 汇编2.3 链接2.4 运行环境3. 预处理3.1 预定义符号3.2 #define3.2.1 #define定义标识符3.2.2 #define定义宏3.2.3 #define替换规则3.2.4 #和##3.2.5 带副作用的宏参…

信息系统项目管理师第四版知识摘编:第6章 项目管理概论

第6章 项目管理概论6.1PMBOK的发展PMBOK项目管理知识体系(Project Management Body Of Knowledge, PMBOK)是由美国项目管理协会(Project Management Institute,PMI)开发的一套描述项目管理专业范围的知识体系&#xff0c;包含了对项目管理所需的知识、技能和工具的描述。编辑切…

Android开发工程师想找工作需要掌握哪些

前言 目前互联网行业越来越好&#xff0c;进入这个行业的人员也是越来越多。从开发的角度来看&#xff0c;开发的职位主要分前端&#xff0c;后端&#xff0c;客户端&#xff08;主要分为ios和android开发&#xff09;以及算法工程师等。 Android开发一直是当前互联网行业中最…

清晰概括:进程与线程间的区别的联系

相关阅读&#xff1a; &#x1f517;通俗简介&#xff1a;操作系统之进程的管理与调度&#x1f517;如何使用 jconsole 查看Java进程中线程的详细信息&#xff1f; 目录 一、进程与线程 1、进程 2、线程 二、进程与线程之间的区别和联系 1、区别 2、联系 一、进程与线程 …

【数据结构与算法】队列和栈的相互实现以及循环队列

目录&#x1f314;一.用队列实现栈&#x1f319;1.题目描述&#x1f319;2.思路分析&#x1f319;3.代码实现⛈二.用栈实现队列☔1.题目描述☔2.思路分析☔3.代码实现&#x1f308;三.实现循环队列&#x1f314;一.用队列实现栈 &#x1f319;1.题目描述 我们先看一下题目链接…

最强的Python可视化神器,你有用过么?

数据分析离不开数据可视化&#xff0c;我们最常用的就是Pandas&#xff0c;Matplotlib&#xff0c;Pyecharts当然还有Tableau&#xff0c;看到一篇文章介绍Plotly制图后我也跃跃欲试&#xff0c;查看了相关资料开始尝试用它制图。 1、Plotly Plotly是一款用来做数据分析和可视…

8个你一看就觉得很棒的Vue开发技巧

1.路由参数解耦 通常在组件中使用路由参数&#xff0c;大多数人会做以下事情。 export default {methods: {getParamsId() {return this.$route.params.id}} }在组件中使用 $route 会导致与其相应路由的高度耦合&#xff0c;通过将其限制为某些 URL 来限制组件的灵活性。 正…