Vue——子级向父级传递数据(自定义事件)

文章目录

前言

在上一篇博客中,说到了父级向子级组件中传递对应的数据信息,以及增加传递数据的类型现在、默认值填充等规则。

Vue------组件数据传递与props校验

但使用props只能是单向的数据传递,也就是由外层父级向内层子级传递,并不能反向进行数据传递。

如何实现子级组件向父级组件传递数据呢?

子级向父级传递数据实现

在vue的官网中,给定一个方式实现,即子级组件中使用this.$emit("自定义方法名",参数)的方式,向父级中进行数据传递。

测试流程如下:

  • 1、子级组件中定义动态数据,定义按钮与按钮的点击事件。
  • 2、子级中的方法具体实现,使用this.$emit("自定义方法名",参数)注册新的事件,并传递数据值。
  • 3、父级组件中,引用自己组件,并使用@自定义方法名监听子级自定义事件。
  • 4、父级组件中指定具体的逻辑方法,处理数据并显示。

代码如下所示:

子级组件中定义动态数据,定义按钮与按钮的点击事件。

创建自定义事件,并传递数据信息。
ChildComponentEvent.vue

html 复制代码
<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

html 复制代码
<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>

浏览器效果展示

刚进页面,刚渲染成功时。


点击按钮后。

相关推荐
运维-大白同学2 分钟前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing32 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴1 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript