vue2.x 中子组件向父组件传递数据主要通过 $emit 方法触发自定义事件方式实现

news/2025/2/23 19:50:56
htmledit_views">

在 Vue 2.x 中,子组件向父组件传递数据主要通过 自定义事件 的方式实现。具体步骤如下:

1. 子组件通过 $emit 触发事件

子组件可以使用 $emit 方法触发一个自定义事件,并将数据作为参数传递给父组件。

语法:
this.$emit('事件名称', 数据);
  • 事件名称:自定义事件的名称,父组件会监听这个事件。

  • 数据:需要传递给父组件的数据,可以是任意类型(如字符串、数字、对象等)。

<template>
  <div>
    <button @click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = '这是子组件传递的数据';
      this.$emit('child-event', data); // 触发自定义事件并传递数据
    },
  },
};
</script>

2. 父组件监听子组件的事件

父组件通过在子组件标签上使用 v-on(或简写为 @)监听子组件触发的自定义事件,并在事件处理函数中接收数据。

语法:
<子组件 @事件名称="事件处理函数" />
  • 事件名称:子组件触发的事件名称。

  • 事件处理函数:父组件中定义的方法,用于处理子组件传递的数据。

示例:
<template>
  <div>
    <h2>父组件</h2>
    <p>接收到的数据:{{ receivedData }}</p>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.html" title=vue>vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      receivedData: '', // 用于存储子组件传递的数据
    };
  },
  methods: {
    handleChildEvent(data) {
      this.receivedData = data; // 接收子组件传递的数据
    },
  },
};
</script>

3. 完整示例

子组件 (ChildComponent.html" title=vue>vue)
<template>
  <div>
    <button @click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = '这是子组件传递的数据';
      this.$emit('child-event', data); // 触发自定义事件并传递数据
    },
  },
};
</script>
父组件 (ParentComponent.html" title=vue>vue)
<template>
  <div>
    <h2>父组件</h2>
    <p>接收到的数据:{{ receivedData }}</p>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.html" title=vue>vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      receivedData: '', // 用于存储子组件传递的数据
    };
  },
  methods: {
    handleChildEvent(data) {
      this.receivedData = data; // 接收子组件传递的数据
    },
  },
};
</script>

4. 运行效果

  1. 父组件渲染子组件,并监听子组件的 child-event 事件。

  2. 当用户点击子组件的按钮时,子组件通过 $emit 触发 child-event 事件,并将数据传递给父组件。

  3. 父组件的 handleChildEvent 方法接收到数据,并更新 receivedData,最终在页面上显示。

5. 注意事项

  1. 事件命名

    自定义事件的名称建议使用 kebab-case(短横线分隔),例如 child-event。

    避免使用驼峰命名因为 HTML 标签属性不区分大小写

  2. 数据传递

    可以通过 $emit 传递任意类型的数据,包括对象、数组等。
  3. 单向数据流

    Vue 提倡单向数据流,子组件通过事件向父组件传递数据,而不是直接修改父组件的数据。

通过以上方式,子组件可以轻松地向父组件传递数据,实现组件之间的通信。


http://www.niftyadmin.cn/n/5863720.html

相关文章

0基础学前端-----CSS DAY13

HTML和CSS3提高 视频参考&#xff1a;B站Pink老师 本节重点&#xff1a;HTML和CSS3的新增特性 本章目录 HTML和CSS3提高1.HTML5新特性1.1HTML新增的语义化标签&#xff08;div无语义&#xff09;1.2 HTML5新增的多媒体标签1.2.1 视频<video>1.2.2 音频audio1.2.3 多媒体…

蓝桥杯——按键

一&#xff1a;按键得原理图 二&#xff1a;按键的代码配置 step1 按键原理图对应引脚配置为输入状态 step2 在GPIO中将对应引脚设置为上拉模式 step3 在fun.c中写按键扫描函数 写完后的扫描函数需放在主函数中不断扫描 扫描函数主要通过两个定义变量的值来判断&#xf…

车载诊断架构 --- LIN节点路由转发注意事项

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…

先进制造aps专题三十 用免费生产排程软件isuperaps进行长期生产计划制定

isuperaps是生产排产软件&#xff0c;同时也可以用来制定长期生产计划 通过isuperaps制定长期生产计划&#xff0c;一个指导原则就是大bom, 单工序&#xff0c;大bom的意思是bom中只包含主要的半成品和原料&#xff0c;单工序的意思是半成品/产品生产以工厂或车间为基本生产单…

【ACM独立出版丨EI检索稳定丨高录用丨Fellow出席演讲】2025年生成式人工智能与数字媒体国际学术会议(GADM 2025)

随着人工智能技术的快速发展&#xff0c;生成式AI在艺术创作、内容生成、用户体验等方面展现出巨大的潜力和挑战。2025年生成式人工智能与数字媒体国际学术会议(GADM 2025&#xff09;将于2025年3月14-17日召开。本次会议将汇聚来自全球的学术专家、研究者和行业领袖&#xff0…

毕业项目推荐:基于yolov8/yolo11的100种中药材检测识别系统(python+卷积神经网络)

文章目录 概要一、整体资源介绍技术要点功能展示&#xff1a;功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出&#xff08;xls格式&#xff09;功能6 支持切换检测到的目标查看 二、数据集三、算法介绍1. YO…

Starlink卫星动力学系统仿真建模第七讲-卫星姿轨控系统(Attitude and Orbit Control System, AOCS)设计规范

以下是一份卫星姿轨控系统&#xff08;Attitude and Orbit Control System, AOCS&#xff09;设计规范的框架和核心内容示例&#xff0c;供参考&#xff1a; 卫星姿轨控系统&#xff08;AOCS&#xff09;设计规范 1. 总则 1.1 目的 本规范旨在规定卫星姿轨控系统的设计要求、…

[250222] Kimi Latest 模型发布:尝鲜最新特性与追求稳定性的平衡 | SQLPage v0.33 发布

目录 Kimi Latest 模型发布&#xff1a;尝鲜最新特性与追求稳定性的平衡SQLPage v0.33 发布&#xff1a;使用 SQL 构建自定义 UI 和 API&#xff01; Kimi Latest 模型发布&#xff1a;尝鲜最新特性与追求稳定性的平衡 Kimi 开放平台推出全新模型 kimi-latest&#xff0c;旨在…