Vue子级如何向父级传递数据(自定义事件)
作者:专注写bug
这篇文章主要介绍了Vue子级如何向父级传递数据(自定义事件),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
在上一篇文章中,说到了父级向子级组件中传递对应的数据信息,以及增加传递数据的类型现在、默认值填充等规则。
但使用props
只能是单向的数据传递,也就是由外层父级向内层子级传递,并不能反向进行数据传递。
如何实现子级组件向父级组件传递数据呢?
子级向父级传递数据实现
在vue的官网中,给定一个方式实现,即子级组件中使用this.$emit("自定义方法名",参数)
的方式,向父级中进行数据传递。
测试流程如下:
- 1、子级组件中定义动态数据,定义按钮与按钮的点击事件。
- 2、子级中的方法具体实现,使用
this.$emit("自定义方法名",参数)
注册新的事件,并传递数据值。 - 3、父级组件中,引用自己组件,并使用
@自定义方法名
监听子级自定义事件。 - 4、父级组件中指定具体的逻辑方法,处理数据并显示。
代码如下所示:
- 子级组件中定义动态数据,定义按钮与按钮的点击事件。
- 创建自定义事件,并传递数据信息。
ChildComponentEvent.vue
<template> <div class="contChild"> <h1>子级组件</h1> <button @click="transToFatherMsg">点击向父级组件传值</button> </div> </template> <script> export default{ data(){ return{ message:"子级组件--》专注写bug 爱吃香蕉" } }, methods:{ transToFatherMsg(){ console.log("子级组件中的点击事件"); /** * 自定义事件 * 参数一:自定义事件名称 * 参数二:自定义事件传参 */ this.$emit("childEvent",this.message); } } } </script> <style scoped> .contChild{ border: 1px blue solid; } </style>
父级引用子级组件,并针对自定事件回传值做处理。
- ParentComponentEvent.vue
<template> <div class="cont"> <h1>父级组件</h1> <p>收到子级组件数据:{{ getMsg }}</p> <!-- 引入子级组件,并申明监听方法 @子级组件注册自定义方法名 --> <ChildComponentEvent @childEvent="getChildMsg"/> </div> </template> <script> // 引入子级组件 import ChildComponentEvent from './ChildComponentEvent.vue'; export default{ data(){ return{ getMsg:"" } }, components:{ // 注册子级组件 ChildComponentEvent }, methods:{ getChildMsg(data){ // 子级自定义方法触发后的具体执行逻辑 console.log("父级接收子级组件数据传递"); // 赋值 this.getMsg = data; } } } </script> <style scoped> .cont{ border: 1px red solid; } </style>
浏览器效果展示
刚进页面,刚渲染成功时。
点击按钮后。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。