vue 的 $emit 的用法（父子组件传值）

最新推荐文章于 2024-03-11 23:59:09 发布
最新推荐文章于 2024-03-11 23:59:09 发布
阅读量3k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： vue $emit 父子组件传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Allan_L/article/details/81234725
版权

vue 父子组件传值的方式，父组件 --> 子组件  或者  子组件 ----> 父组件

下面，简洁的说一下vue中这两者传值的方式：

子组件：

在methods方法中，触发this.$emit('reload',  param）；

 

 

父组件：

父组件中监听reload方法，并触发init方法。

Allan_L
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vuejs使用$emit和$on进行组件之间的传值的示例
11-26
$emit和$on可以实现组件之间的传值，我们知道父组件传值给子组件使用props，但是不允许子组件传值给父组件，这时候使用这个就可以实现了。 注意：$emit和$on的事件必须在一个公共的实例上，才能够触发。 例子：我要...
Vue2 框架整理：子组件向父组件传递数据，$emit() 或 v-on
freedomVenly的博客
07-02 2573
当子组件向父组件传递数据的时候，需要的是自定义事件： $on & $emit 子组件用$emit()触发事件， 父组件用$on() 监听子组件的事件 或者父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件： $emit() 中第一个参数是方法的名称，后面都是根据需求设定要传递的数据 比如： （下面所有 v-on 简写为语法糖@） &lt...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3859
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
高项 配置与变更管理
最新发布
克里斯蒂亚诺更新的博客
03-11 114
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 使用reload刷新页面方法（祖孙之间调用）
qq_46222892的博客
08-17 594
.provide() { return { reload:this.reload } }, reload() { // 所需逻辑 this.RouterState = false this.$nextTick(()=> { this.RouterState = true }) }, 2.使用，与data同级 inject:['reload'], this.relo...
组件传递数据——$emit（子传父）
weixin_46372993的博客
08-04 2080
emit的用法提示：以下是本篇文章正文内容，下面案例可供参考（1）ParentComponent组件data() {（2）ChildComponent组件（3）App.vueemit用于触发自定义事件。通过$emit方法可以在组件内部触发一个自定义事件，并传递数据给父组件或其他监听该事件的组件。使用emit的语法为：this.$emit(eventName, data)，其中eventName为自定义事件的名称，data为要传递的数据（可选）。
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输。重点给大家介绍vue中的$emit 与$on父子组件与兄弟组件的之间通信方式，感兴趣的朋友一起看看
Vue $emit()不能触发父组件方法的原因及解决
10-15
主要介绍了Vue $emit()不能触发父组件方法的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue组件通信中非父子组件传值知识点总结
10-15
在本篇文章里小编给大家整理的是关于Vue组件通信中非父子组件传值知识点总结，有兴趣的朋友们学习下。
Vue实现$emit传参
dotaxpj的博客
05-17 1608
Vue实现$emit传参 子组件单参 子组件： this.$emit('hanldeParent','son') 父组件不传参： <childCom @hanldeParent="handle"/> <!-- handle($event)中的$event可省略 --> handle(name){ console.log(name) // 'son' } 父组件传参： <childCom @hanldeParent="handle($event
$emit传递参数
weixin_42097439的博客
04-06 1万+
$emit传递一个参数时 //子组件代码 let data = {name:'王五',age:'50'}; this.$emit('change',data) //父组件代码 <editable-cell @change="onCellChange($event)" /> onCellChange(backMsg) { this.msg = backMsg; } $emit传递多个参数时 //子组件代码 let data = {name:'王五',age:'50'}; let type =
vue刷新当前页面
couch potato的博客
05-27 196
provide / inject 这对用例 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效 app.vue <template> <transition v-bind:css="false" name="fade"> <router-view v-if="isRouterAlive"></router-view> </transition> </t
vue中使用$emit传递参数
bianenhui91的专栏
02-26 676
【代码】vue中使用$emit传递参数。
Vue中 关于$emit的用法（父子组件传值)
emmmmmmm__的博客
12-10 3598
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 子组件： <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> &
Vue2在实际项目中的应用——表格组件功能介绍
Challenge Next Challenge
05-14 1866
TableList组件是以ElementUI Table表格组件为主，并封装了一系列其它组件，提供了以下主要功能 筛选功能 搜索功能 分页功能 加载过程以及错误信息提示功能 行展开功能 单选行功能 switch开关组件功能 progress进度组件功能 分行显示日期时间组件功能 动态组件渲染功能 自定义列组件功能 表格组件可以分为三个部分：头部（筛选，搜索）、数据部分、底...
Vue子组件向父组件传值（this.$emit()方法）
weixin_39390837的博客
06-02 6053
子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件，然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义组件 components:{ indexImportOrder, }, 使用 <indexImportOrder ref="indexImportOrder"/> 第...
Vue的emit方法，子组件向父组件传递参数
qq_52070860的博客
10-21 6161
Vue的子组件向父组件传递参数，提供了$emit方法 $emit有两个参数，$emit(‘事件名’,传递的参数)，两个参数后续说明，上代码； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-model</title> <script src="vue.js"></script&...
vue $emit()传参接收方式
FantasyBreaker的博客
02-07 8065
子组件传出单个参数时： // 子组件 this.$emit('test',this.param) // 父组件 @test='test($event,userDefined)' 其中$event是子组件传递的参数，第二个参数为父组件传的参数，如果没有可以不传。 子组件传出多个参数时： // 子组件 this.$emit('test',this.param1，this.param2, this.param3) // 父组件 arguments 是以数组的形式传入 @test='test(argume.
vu e父子组件传值$emit
08-30
- *2* [vue父子组件传值](https://blog.csdn.net/dtbk123/article/details/105643047)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值