Vue——子级向父级使用props传递数据(函数)

文章目录

  • 前言
  • 原理
  • 案例
  • 效果演示

前言

看到这个标题,相信很多人会说我,你之前博客写的父级向子级中传递数据使用的是props,然后说的子级向父级传递数据则是用的$emit

并且还说了对于String、数组Array,只能是父级使用props传递至子级组件。这不是很矛盾嘛?

其实,props传递的数据类型除了字符串String数组Array对象 Object之外,还能传递一个Function 函数类型

原理

  • 1、父级将自己的某个函数,传递至子级中。
  • 2、子级获取父级传递来的函数类型,并进行调用操作。

相当于是子级组件调用了父级组件中的函数方法,触发父级的数据处理与展示。

案例

定义两个模板,分别如下所示:

父级模板 ComponentPropsParent.vue
父级向子级中传递了一个msg字符串类型的数据;
同时也传递了父级中的getDataFromChild 函数,但是传递的变量名是 getChildData

<template><h1>父级页面</h1><p>父级获取子级数据:{{ info }}</p><ComponentPropsChild msg="父级传子级数据" :getChildData="getDataFromChild"/>
</template>
<script>
// 引用子级组件
import ComponentPropsChild from './ComponentPropsChild.vue';
export default{data(){return{info:""}},components:{// 注册子级组件ComponentPropsChild},methods:{getDataFromChild(data){this.info = data;}}
}
</script>

子级模板 ComponentPropsChild.vue
使用props接收父级传来的字符串msg数据和getChildData 作为变量携带的函数
并调用父级传入的函数。

<template><h1>子级页面</h1><p>收到父级传递进子级的数据:{{ msg }}</p><!-- 不能这么写 --><!-- <button @click="transDataToFather('6666666')">点击一下传递数据到父级</button> --><!-- getChildData 是一个函数,不是变量,所以要加() 如果有参数,则是('xxx') --><p>子级调用父级传递进来的函数:{{ getChildData('子级调用父级传入函数,并返回这句话!') }}</p>
</template>
<script>
export default{data(){return{}},props:{msg:String,// 父级向子级中传递的是一个父级的函数,子级调用函数,会触发父级函数逻辑getChildData:Function // 注意 F 大写,表示是函数类型对象},// methods:{//  transDataToFather(values){//   getChildData(values);//  }// }
}
</script>

效果演示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848893.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

矩阵链相乘(动态规划法)

问题分析 矩阵链相乘问题是一个经典的动态规划问题。给定一系列矩阵&#xff0c;目标是找到一种最优的乘法顺序&#xff0c;使得所有矩阵相乘所需的标量乘法次数最少。矩阵链相乘问题的关键在于利用动态规划来避免重复计算子问题。 算法设计 定义子问题&#xff1a;设 &…

代码随想录第三十天打卡|332.重新安排行程, 51. N皇后, 37. 解数独

332.重新安排行程&#xff08;可跳过&#xff09; 代码随想录 class Solution { public:unordered_map<string,map<string,int>>mp;bool backtracking(int ticketNum,vector<string>&res){if (res.size()ticketNum1)return true;for (pair<const str…

【2024.06.06 晴-周四】

今日学习情况&#xff1a; 感想&#xff1a;早上去听了讲座&#xff0c;总共有十次&#xff0c;已达标。下午在做导师安排的一个python作业&#xff0c;遇到了BUG&#xff0c;还是解决了。还是得写个计划&#xff0c;要不然实习回来就很累&#xff0c;不想学习。明日计划&…

HTTP-一

一、超文本传输 1. 文本传输 > 字符串(能在utf8/gbk等码表上找到合法字符) 2. 超文本传输 > 不仅仅是字符串,还可以携带一些图片,特殊得格式 HTML 3. 富文本 word http0.9 -> http1.0 -> http1.1 -> http2.0 -> http3.0 http1.0是主流版本 2.0 和…

Vue性能的评估指标

Vue性能的评估指标通常包括&#xff1a; 首屏加载时间&#xff08;First Contentful Paint, FCP&#xff09; 首次可交互时间&#xff08;First Meaningful Paint, FMP&#xff09; 页面完全加载时间&#xff08;DOMContentLoaded&#xff09; 布局变化次数&#xff08;Layo…

redis安裝启动

1、下载redis解压 https://github.com/tporadowski/redis/releases 2、打开cmd&#xff0c;切换到解压的文件夹 3、redis-server.exe redis.windows.conf 启动redis redis可通过命令行输入config set requirepass password和直接修改redis.config文件中修改 requirepass 来设…

英伟达再创历史,市值超越苹果,跃居全球第二大上市公司

进入2024年&#xff0c;英伟达股价依然突飞猛进。 今天凌晨&#xff0c;英伟达凭借其在AI领域强劲的创新能力和市场势头&#xff0c;达成了历史性的里程碑——市值首次突破3万亿美元&#xff0c;成功超越苹果&#xff0c;成为全球市值第二大上市公司。 排名仅次于微软。 英伟达…

f1c100s 荔枝派 系统移植

一。交叉编译环境配置 1.1下载交叉工具链&#xff1a;https://releases.linaro.org/components/toolchain/binaries/7.2-2017.11/arm-linux-gnueabi/ 1.2解压安装 在home目录下新建 工程目录&#xff1a;mkdir f1c100s_project 将windows下的gcc-linaro-7.2.1-2017.11-x86…

每日一题34:数据分组之查找每个员工花费的总时间

一、每日一题 表: Employees ------------------- | Column Name | Type | ------------------- | emp_id | int | | event_day | date | | in_time | int | | out_time | int | ------------------- 在 SQL 中&#xff0c;(emp_id, event_day, in_time) 是…

二叉搜索树(BST,Binary Search Tree)

目录 前言 一、二叉搜索树概念 二、二叉搜索树的实现与操作 1.查找 2.插入 3.删除 4.中序遍历 5.完整代码 三、二叉搜索树的应用&#xff08;K模型、KV模型&#xff09; 1.K模型 2.KV模型 3.完整代码 四、二叉搜索树的性能分析 前言 为何学&#xff1f; 1.二叉…

我的python管理

目前环境 Anaconda&#xff1a;python3.9 python2.7 IDA&#xff1a;python3.8 pycharm&#xff1a;&#xff1f;&#xff1f; 以后应该会补吧… 因为某些文件似乎用的python2决定整个python2 安装python2.7 打开anaconda命令行输入 conda create --name python27 python2…

JAVAEE值网络编程(2)_TCP流套接字及通信模型、TCP网络编程及代码实例

前言 在上一节内容中&#xff0c;我们介绍了什么是套接字&#xff0c;以及使用UDP数据报套接字网络编程&#xff0c; 最后我们还介绍了Java数据报套接字通信模型以及相关代码实例。在这一节我们将会介绍TCP流套接字编程。 一、流套接字及通信模型 1.1 TCP套接字 TCP&#xff0…

云计算-高级云资源配置(Advanced Cloud Provisioning)

向Bucket添加公共访问&#xff08;Adding Public Access to Bucket&#xff09; 在模块5中&#xff0c;我们已经看到如何使用CloudFormation创建和更新一个Bucket。现在我们将进一步更新该Bucket&#xff0c;添加公共访问权限。我们在模块5中使用的模板&#xff08;third_templ…

内网安全--隧道技术代理技术

注:本文仅做技术交流,请勿非法破坏... 目录 项目: 1-Ngrok 用法 2-Frp 用法 3-Nps 用法 4-Spp 用法 工具: windows下: Proxifier(推荐~) Sockscap ccproxy Linux下: Proxychains 用法 http://t.csdnimg.cn/88Ew7 隧道技术&#xff1a;解决不出网协议上线的问…

TikTok运营必看|7大广告类型及特点

TikTok广告是品牌或创作者付费向特定目标受众展示的推广内容&#xff08;通常是全屏视频&#xff09;。TikTok 上的广告是一种社交媒体营销形式&#xff0c;通常旨在提高广告商的知名度或销售特定产品或服务。 就 TikTok广告投放而言&#xff0c;其组织层级分为三个层级&#x…

【Java】static 修饰成员方法

static 修饰成员方法 简介 应用 static 修饰成员方法 1.static 修饰成员方法2.内存原理3.main函数4.类方法的应用 1.static 修饰成员方法 测试类&#xff1a; package suziguang_d2_staticdemo;public class Test {public static void main(String[] args) {// 1.类方法使用/…

【成品设计】基于USB接口的指纹图像采集与处理系统设计

《基于USB接口的指纹图像采集与处理系统设计》 所需器件&#xff1a; STM32F429阿波罗开发板。ATK-AS608 模块指纹识别模块。USB转TTL模块。 整体功能&#xff1a; 实现指纹的采集录入。实现指纹的对比&#xff0c;并展示对比结果&#xff0c;用LED灯和蜂鸣器提示。指纹信息…

app自动识别ios或安卓手机,微信浏览器,并下载相应的apk安装包

来源是安卓下载界面显示: 来源是IOS下载界面显示: 源码 <!DOCTYPE html> <html lang="en"><head

微软新AI工具 Recall 被白帽公开锤了?

近日&#xff0c;一些网络安全研究人员演示了恶意软件是如何成功窃取 Windows Recall 工具收集到的数据。 2024年5月21日&#xff0c;微软发布全新的“CopilotPC”&#xff0c;这类 AI PC 通过与高通的最新芯片合作&#xff0c;实现了一个叫做“Recall”的功能。借助这个人工智…

Vue3 父子组件

父组件 主要就是 导入子组件&#xff0c;template中通过“&#xff1a;”给值&#xff0c;通过给方法 <template><!-- 给子类的时候没有“&#xff0c;”全都是“&#xff1a;” PageSizeChange将方法传递给子类组件&#xff0c;--><!-- 父类的方法是onPageSi…