Vue自定义事件$emit()详解

最新推荐文章于 2024-06-21 08:47:39 发布
最新推荐文章于 2024-06-21 08:47:39 发布
阅读量2.1k 收藏 2
点赞数 1
分类专栏： Vue精华讲解 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41359998/article/details/122902601
版权

Vue自定义事件$emit()详解

在这里插入图片描述
在组件绑定数据后，我们如果想实现一个点击删除按钮就删除这个数据的功能，那么我们需要删除vue中的数据。如何实现？vue实例和vue组件互不相干，组件和组件之间的操作可以用插槽，组件如何调用Vue实例中的方法？

数据项在 Vue 的实例中，但删除操作要在组件中完成，那么组件如何才能删除
Vue 实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；使用 this.$emit(‘自定义事件名’, 参数)，操作过程如下:

demo

在这里插入图片描述
myDefineThing.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></
最低0.47元/天 解锁文章
冷丁_
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于vue中 $emit的用法详解
01-19
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： <template> <div class=train-city> <span click='select(`\u5927\u8fde`)'>大连</span> </div> </template> [removed] export default { name:'trainCity', methods:{ selec
如何在Vue.js中使用$emit进行组件通信
bxstephen的专栏
12-30 912
在Vue.js中使用$emit进行组件通信。
【vuejs】 $on、$once、$off、$emit 事件监听方法详解以及项目实战
最新发布
工作的日常记录和平凡的生活分享
06-21 1530
vm.$on是Vue实例用来监听自定义事件的方法。它允许开发者在Vue实例上注册事件监听器，当事件被触发时，指定的回调函数会被执行。
Vue中的$emit的使用方法与理解
qq_34082921的博客
01-13 5343
> - 学到Vue的组件内传值时，props父传子还能理解，但是对子组件给父组件传值（也就是$emit方法），对于这个$emit我感觉有点绕，知道它的作用，但是对它的用法还是掌握不好，主要还是对于为什么这么用很疑惑。 >- 对父组件给子组件传值很简单，也很好理解。父组件给子组件传值只要在子组件标签内用V-bind写一个函数方法（也可以传参数）用props接收就可以直接使用了。但是到子组件给父组件传值就变得复杂了，首先要先在子组件标签内声明触发$emit的事件，触发条件后用$emit发送自定义事件（包含事件
Vue的$emit传值
xiaoxiaoluckylucky的博客
03-08 1万+
$emit，父组件传data给子组件，子组件通过$emit来触发父组件中绑定在子组件身上的事件，达到改变父组件中的data的方法。下面介绍$emit传值的几种方法： 一：$emit传递单值 子组件Test.vue： <template> <div> <div>子组件</div> <button @click="changeFather">点击我向父组件传递参数</button> </div> </tem
Vue中$emit的用法
AlopexG的博客
05-12 4513
一句话理解： 子组件可以使用$emit触发父组件的自定义监听 例如 子组件 item.vue <template> <button @click="$emit('test', 5)"> 触发父组件的test监听, 参数为5 </button> </template> <script> // ... </script>　 父组件 xxx.vue <template&g
组件传递数据——$emit（子传父）
weixin_46372993的博客
08-04 2339
emit的用法提示：以下是本篇文章正文内容，下面案例可供参考（1）ParentComponent组件data() {（2）ChildComponent组件（3）App.vueemit用于触发自定义事件。通过$emit方法可以在组件内部触发一个自定义事件，并传递数据给父组件或其他监听该事件的组件。使用emit的语法为：this.$emit(eventName, data)，其中eventName为自定义事件的名称，data为要传递的数据（可选）。
一次说清Vue的$emit()事件
热门推荐
thankseveryday的专栏
07-15 2万+
$emit emit：发射，射…的意思吧 用法： $emit( eventName, […args] ) eventName：事件触发后调用的事件名 …args：附加参数，会传给监听器回调。 文档说：它是一个触发当前实例上的事件。附加参数都会传给监听器回调。 示例1：只配合一个事件名使用 $emit(‘welcome’) // 定义组件 Vue.component('welcome-butto...
详解vue中this.$emit()的返回值是什么
10-17
在Vue中，组件间的通信是至关重要的，而`this.$emit()`是Vue实例的一个方法，用于触发当前组件的自定义事件。这篇文章将深入探讨`this.$emit()`的返回值及其在实际开发中的应用。 首先，我们要明确`this.$emit()`的...
Vue自定义事件(详解)
12-10
本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface)，即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API...
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
当组件中的某个操作发生时，可以通过 `$emit` 触发一个自定义事件，并可以携带数据。父组件可以通过监听这些事件来响应子组件的行为。例如，子组件通过 `this.$emit('my-event', this.msg)` 触发了名为 "my-event" ...
vue中 关于$emit的用法
极客神殿
12-08 1万+
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： &amp;lt;template&amp;gt; &amp;lt;div class=&quot;train-city&quot;&amp;gt; &a
vue3使用emit(用法一：组件传值(传方法)；用法二：做触发器)------写在setup(){}方法里面的
weixin_45458830的博客
11-27 6393
2、子组件里用$emit向父组件触发一个事件(setup语法糖，setup直接写在script标签上)1、父组件中把方法作为属性传入子组件，在子组件里直接调用这个方法(写在setup()方法里)vue3子组件调父组件的方法(就是用props把父方法传给子，即父传子，只不过传的是方法)
Vue.js 中的 $emit 和 $on 方法有什么区别？
徐师兄的博客
06-07 2303
emit 和on方法是Vuejs中用于实现组件间通信的两个重要方法。on 方法是 Vue.js 中用于实现组件间通信的两个重要方法。on方法是Vuejs中用于实现组件间通信的两个重要方法。emit 方法用于触发自定义事件并向父组件或祖先组件派发该事件，而on方法用于监听自定义事件并在事件触发时执行回调函数。on 方法用于监听自定义事件并在事件触发时执行回调函数。on方法用于监听自定义事件并在事件触发时执行回调函数。emit 方法必须在组件内部使用，而on。
vue实例方法：$emit() 事件(其一)
Allanwhy的博客
04-21 2634
理解emit是做什么用的 官方给出的解释是，触发当前事件附加参数都会传给监听器回调。。。 然后就会一大串东西了。 详情可以看官网对它 的解释：$emit() 那么就来个栗子吧~ 我有两个.vue页面：shopCart页面和cartcontrol页面。 cartcontrol页面作为组件被shopCart页面应该用。 这是shopCart页面需要做的事~ import cartcontrol fr...
关于 Vue 自定义按钮组件 $emit(‘click‘) 一次触发两次的问题总结
qq_37750365的博客
06-30 6216
子组件 <template> <button :class="['yt-button', ClassOfType, ClassOfSize]" @click="$emit('click')"> <slot></slot> </button> </template> <script> export default { name: "YtButton", props: {
vue与$emit。
studyis01的博客
11-20 738
vue与$emit 1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； ...
Vue里面的$emit与$on
ting119的博客
07-06 1755
    学习Vue看到了里面的$emit，有一个疑问冒出来：“$emit必须和$on一起使用吗？”    在我看来虽然没有说是必须一起使用，但基本上都是搭配在一起出现，因为$emit的作用是子组件对父组件发送数据，$on可以接收到子组件返回的数据，所以有$emit的地方应该就有$on了，我是这样理解的。    $emit的参数Event.$emit('name',data);　其中name是发送数...
this.$emit方法详解
08-26
this.$emit方法是Vue.js中用于触发自定义的方法。它是由实例、组件或指令中的事件系统提供的。 当我们需要在父组件中监听子组件的事件时，可以在子组件中使用this.$emit方法触发事件，并在父组件中使用v-on指令监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值