浅读vue组件（三）——$emit

最新推荐文章于 2024-07-09 18:39:27 发布
最新推荐文章于 2024-07-09 18:39:27 发布
阅读量132 收藏
点赞数
分类专栏： vue学习 文章标签： vue JavaScript html 前端 $emit
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yt412182782/article/details/98593439
版权

父组件给子组件传递数据使用props，

子组件给父组件传递数据就需要使用内置$emit触发自定义的事件

上例子：

~~~~~~~~~~~~~~~~~~~子组件~~~~~~~~~~~~~~~~~~~~~~~~~~

这是个弹出框，点击取消和确定的时候执行并将数据传递给父组件：

hideData方法：

利用内置的$emit将fieldClose传递给父组件

~~~~~~~~~~~~~~~~~~~父组件~~~~~~~~~~~~~~~~~~~~~~~~~~

利用v-on将$emit传递过来的fieldClose绑定，在父组件中定义一个方法，把方法传递给@fieldClose

以上的方式，是不带值传递，$emit也可以携带值传递，

父组件

change方法

data值就是传递过来的this.checkboxList值，子组件想访问父组件的数据，就要通过$emit来传递

 

_花开蒂落_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对于vue中$emit的理解
shuairan1999的博客
06-22 2976
$emit emit的意思是发出、射出。 子组件可以通过props接收父组件传递过来的数据。 子组件也可以用过$emit来触发父组件的自定事件，再说的通俗易懂一些就是子组件可以调用父组件的方法。 用法 $emit( eventName, […args] ) eventName：这是一个事件名，会绑定一个方法。当组件触发事件后，将调用这个方法。 […args]：附加的参数，会被抛出，由上述绑定的方法接收使用。 例子 子组件： <template> <button @click=
Vue —— $emit 监听子组件事件
bats的博客
07-14 847
Vue —— $emit 监听子组件事件监听子组件事件（官方Demo）基本用法子组件通过`emit`抛出参数父组件接受的事件不是一个方法父组件的事件处理函数是一个方法在自定义组件上使用`v-model` vm.$emit( eventName, […args] ) 参数： {string} eventName […args] 触发当前实例上的事件。附加参数都会传给监听器回调。 监听子组件事件（官方Demo） 基本用法 在我们开发 <blog-post> 组件（子组件）时，它的一些功
在 Vue 中使用 vue-class-component 与 vue-property-decorator
sigmarising的博客
06-04 7187
在 Vue 中使用 vue-class-component 与 vue-property-decorator 在 Vue 的 V2.X 版本中使用 TypeScript 时，推荐使用基于类的注解装饰器进行开发。 1. 安装相关 vue-property-decorator 基于 vue-class-component 开发而成，所以安装时仅需安装 vue-property-decorator ...
vue中组件之间的通信--$emit
SCUhzs
01-21 1787
1.用法 ​ $emit( eventName, […args] ) ​ eventName：一个事件名，会绑定一个方法。当组件触发事件后，将调用这个方法。 ​ …args：附加参数，会被抛出，由上述绑定的方法接收使用。 文档说：它是一个触发当前实例上的事件。附加参数都会传给监听器回调。 ​ 子组件使用this.$emit()向父组件传值。首先必须在父组件中引用子组件，然后实现传值。 1.1在父...
vue父子组件——$emit()事件
打代码是一天，不打代码也是一天
09-21 703
<!-- 子组件 --> <template> <div class='container'> <div>子组件</div> <button @click="btn">按钮</button> </div> </template> <script> export default { name: 'Child',
vue笔记——$emit和$on用法
路人丙的博客
05-06 612
当我们在进行子组件向父组件传递参数的时候在父组件的子组件标签上定义了一个事件，并在子组件通过this.$emit触发了这个事件，这就是$emit和$on的使用。那么我们来详细的看看这两个方法的使用吧。 vm.$on( event, callback ) 创建一个事件 参数： {string | Array<string>} event （意思就是你定义的事件的名称） {...
组件传递数据——$emit（子传父）
weixin_46372993的博客
08-04 2310
emit的用法提示：以下是本篇文章正文内容，下面案例可供参考（1）ParentComponent组件data() {（2）ChildComponent组件（3）App.vueemit用于触发自定义事件。通过$emit方法可以在组件内部触发一个自定义事件，并传递数据给父组件或其他监听该事件的组件。使用emit的语法为：this.$emit(eventName, data)，其中eventName为自定义事件的名称，data为要传递的数据（可选）。
Vue——组件$emit传递多个参数
qq_43201350的博客
07-13 1103
Vue——组件$emit传递多个参数
vue2——this.$emit两种方式传值更新（组件父子传值）
weixin_46172421的博客
09-06 7364
this.$emit两种方式传值更新 1.父组件使用.sync方式传值子组件 1.1 子组件使用$emit update方式更新 2.子组件定义自定义事件带参的形式,父组件调用自定义事件,参数修改 2.1子组件定义自定义事件，带参数。 2.2父组件调用自定义事件。 感谢记录，感谢各位，欢迎补正。 end 人与人的缘分总是长长短短~ ...
Vue购物车——组件化.rar
05-01
在"Vue购物车——组件化"这个示例中，我们将深入探讨Vue组件的全局注册与局部注册、父子组件之间的通信以及数据的单向绑定等关键概念。 首先，我们来看**Vue组件的全局注册**。全局注册组件意味着在整个Vue实例中，...
Vue 组件复用多次自定义参数操作
10-15
此外，Vue组件还支持一种强大的功能——插槽（Slot），用于在组件内部插入自定义内容。插槽允许父组件动态地向子组件传递内容，而无需使用props。例如，我们创建一个`my-blog`组件，它有一个默认插槽，可以插入任意...
Vue组件通信$attrs、$listeners实现原理解析
11-19
前言 vue通信手段有很多种，props/emit、vuex、event bus、provide/inject...当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以通过v-bind=”$attrs”传入内部组件——在创
Vuejs第十三篇之组件——杂项
11-22
【Vue.js 组件详解】 Vue.js 的组件系统是其核心特性之一，允许开发者构建可复用的 UI 块，从而提高代码的模块化和可维护性。组件本质上是自定义元素，Vue.js 编译器为其赋予特殊功能。组件可以以原生 HTML 元素的...
HTML实现图片查看与隐藏
你羡慕的生活都是你没熬过的苦。
07-08 502
你好呀，我是小邹。在网页设计中，提供一个直观且用户友好的图片查看功能是提升用户体验的重要一环。本文将详细介绍如何使用HTML、CSS和JavaScript来实现图片的查看与隐藏功能。通过本教程，你将学会如何让页面上的图片在点击时放大显示，以及如何通过再次点击或点击背景来关闭放大的图片。
HTML最快速最简单
07-08 295
HTML 元素以开始标签起始，HTML 元素以结束标签终止空元素在开始标签中进行关闭（以开始标签的结束而结束）元素的内容是开始标签与结束标签之间的内容。
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 406
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
一文清晰了解HTML——简单实例
weixin_73074505的博客
07-08 319
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
HTML 标签简写及全称:表格内容将通过JavaScript动态生成
最新发布
lulei5153的博客
07-09 217
【代码】HTML 标签简写及全称:表格内容将通过JavaScript动态生成。
vue $refs可以获取到子组件，但是子组件emit获取不到父组件
07-28
引用\[2\]中的代码展示了在Vue中子组件通过$emit触发事件，父组件通过监听这个事件来执行相应的方法。在子组件中，通过this.$emit('test')来触发名为test的事件。在父组件中，通过@test="test"来监听这个事件，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值