当前位置: 首页 > news >正文

『VUE』26. props实现子组件传递数据给父组件(详细图文注释)

目录

    • 本节内容
    • 示例代码
    • 总结


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

本节内容

父组件传子组件–props
子组件传父组件–自定义事件

本节讲子组件传父组件–通过props里的方法传递,就是父亲写了一个函数,给子组件调用,然后通过这个方法父亲拿到了子组件的数据.


示例代码

<ComponentS title="标题" :onEvent="dataGive" />传递dataGive方法给子组件
子组件中接收方法

  props: {title: String,onEvent: Function,},

子组件中调用方法

  <p>给父组件传的数据:{{ onEvent("我是子组件的数据") }}</p>

父组件中拿到数据

    dataGive(data) {console.log("子组件传递给父组件的数据:", data);this.message = data;},

在这里插入图片描述

ComponentP.vue

<template><h3>组件事件父组件</h3><ComponentS title="标题" :onEvent="dataGive" /><div>子组件传递给父组件的数据:{{ message }}</div>
</template><script>
import ComponentS from "./ComponentS.vue";export default {data() {return {message: "",};},components: {ComponentS,},methods: {dataGive(data) {console.log("子组件传递给父组件的数据:", data);this.message = data;},},
};
</script>

ComponentS.vue

<template><h3>组件事件子组件</h3><p>{{ title }}</p><p>给父组件传的数据:{{ onEvent("我是子组件的数据") }}</p>
</template><script>
export default {data() {return {};},props: {title: String,onEvent: Function,},
};
</script>

总结

大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


http://www.lryc.cn/news/484364.html

相关文章:

  • RHCE-DNS域名解析服务器
  • 移民统计年鉴(1996-2021年)
  • MFC1(note)
  • 1.1 关于游戏编程
  • 光流法与直接法在SLAM中的应用
  • C++模板特化实战:在使用开源库boost::geometry::index::rtree时,用特化来让其支持自己的数据类型
  • 让空间计算触手可及,VR手套何以点石成金?
  • 穿越数据迷宫:C++哈希表的奇幻旅程
  • SMT32 智能环境监测系统 嵌入式初学者课堂小组作业
  • 20241114给荣品PRO-RK3566开发板刷Rockchip原厂的Android13下适配RJ45以太网卡
  • JVM这个工具的使用方法
  • 创建型设计模式与面向接口编程
  • 算法每日双题精讲——滑动窗口(长度最小的子数组,无重复字符的最长子串)
  • 1.7 JS性能优化
  • STL - vector的使用和模拟实现
  • 《鸿蒙生态:开发者的机遇与挑战》
  • 【C++融会贯通】二叉树进阶
  • 使用python-Spark使用的场景案例具体代码分析
  • 如何查看本地的个人SSH密钥
  • 本人认为 写程序的三大基本原则
  • A030-基于Spring boot的公司资产网站设计与实现
  • React Hooks 深度解析与实战
  • #渗透测试#SRC漏洞挖掘#蓝队基础之网络七层杀伤链04 终章
  • 计算机毕业设计Python+大模型农产品推荐系统 农产品爬虫 农产品商城 农产品大数据 农产品数据分析可视化 PySpark Hadoop
  • 爬虫补环境案例---问财网(rpc,jsdom,代理,selenium)
  • SpringBoot有几种获取Request对象的方法
  • 在 Windows 11 中使用 MuMu 模拟器 12 国际版配置代理
  • ASP.NET Core Webapi 返回数据的三种方式
  • SQL面试题——蚂蚁SQL面试题 连续3天减少碳排放量不低于100的用户
  • Python酷库之旅-第三方库Pandas(216)