最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vue子组件向父组件通信与父组件调用子组件中的方法
时间：2022-06-25 15:58:40 编辑：袖梨 来源：一聚教程网
子组件向父组件通信
子组件的button按钮绑定点击事件,事件方法名为sendToParent(),
该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);
在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),
而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息
父组件调用子组件中的方法
点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父级消息”],
useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即this.$refs.child1.getMsg(str);
而getMsg方法已经在子组件的methods中声明,其行为是console.log('子级组件收到父级的内容',str);,
所以,最终的输出结果为: 子级组件收到父级的内容 父级消息
代码示例（结合上面的分析理解代码）
子向父通信 这是父组件
展示父级接收到的消息:{{msg}}
这是子组件
效果图
相关文章
- crystaldiskinfo各项数据看法 05-07
- OpenClaw gateway无输出直接退出怎么办?三步解决无限重启问题 05-07
- 严选漫画app安卓苹果安装包下载入口-免费看韩国漫画网站最新版本下载 05-07
- 来自黑洞的旅人通用兑换码大全一览 05-07
- 虫林好汉乌合之众手游上线时间｜虫林好汉乌合之众开服日期及预约入口 05-07
- 免费影视平台哪家强-免费看电影电视剧的宝藏app 05-07