箭头函数处理子组件向父组件传值

已于 2022-05-19 20:10:33 修改
阅读量245 收藏
点赞数
文章标签： vue.js
于 2022-05-19 20:09:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LIMITSSS/article/details/124870226
版权

在编辑个人资料功能中，有父组件Personal.vue和子组件PersonalInfo.vue

其中父组件访问后端获得个人信息，并调用子组件

<PersonalInfo
   infoKey="用户名"
   :infoValue="info.uname"
   infoType="input"
></PersonalInfo>

子组件根据父组件传的infoType决定是显示input框，单选框还是textarea文本框

点击提交按钮通过子组件向父组件传值的方式向父组件传递编辑后的数据

父组件根据子组件传来的值修改个人资料并传给后端，但是有多个子组件，父组件需要判断子组件是修改个人资料哪一项，太过麻烦，如果使用下面的写法则无法获取子组件传过来的value

使用箭头函数就可以解决

出来嗨啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
箭头函数this指向问题
nldxfs的博客
09-08 175
前言： 线下笔试碰到的题目，发现学习掌握的不透彻，所以回来填坑 题目 const obj1 = { a:1, func:()=>{ console.log(this,this.a); } } const obj2 = { a:2 } console.log(obj1.func.bind(obj2)()); 输出结果为： 刚开始很疑惑结果，...
vue父组件通过props如何向子组件传递方法详解
12-10
本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需...
箭头函数使用及不能使用箭头函数的情况
DOM曼珠沙华的博客
05-08 3370
基本用法 ES6允许使用“箭头”（=>）定义函数 var f = v => v; //一个参数 // 等同于 var f = function (v) { return v; }; 如果箭头函数不需要参数或者需要多个参数，就用一个圆括号表示参数部分。 var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var su
vue的学习笔记（12）之箭头函数
肿肿的博客
02-02 6051
箭头函数1、箭头函数的使用2、箭头函数参数和返回值3、箭头函数中的this 1、箭头函数的使用 定义函数有三种方式： <script> //箭头函数：也是一种定义函数的方式 //1.定义函数的方式：function const aaa=function () { } //2.对象字面量中定义函数 const obj={ bbb: function () { }, ccc() { } } //3.es6中的箭头函数 // const ddd=(参
vue---箭头函数
bzuld的专栏
07-31 1214
ES6中的箭头函数：参数=>函数体； （1）箭头函数和普通函数对比 普通函数： function test(var param){ alert("这是传过来的参数"+param); } 箭头函数： param=>alert("这是传过来的参数...
Vue框架学习----箭头函数
Sw1ng的博客
08-16 174
1箭头函数基本使用 const 变量名 = (参数列表) => { } 2参数、返回值 在有一个参数时，小括号可省去 函数代码块中只有一行代码时，可写成如下形式： 3 this使用 向外层作用域中一层一层查找this，直到有this的定义 ...
解析vue data不可以使用箭头函数问题
08-27
主要介绍了vue data不可以使用箭头函数问题，本文通过源码解析给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
swiper组件添加左右箭头
03-29
前言：小程序官方swiper组件并未提供带左右箭头功能，但有些时候还是想把左右箭头添加上，今天连胜老师就给大家分享一下自己的实现方式。 思路很简单：在swiper组件内部添加两个image组件，绑定点击事件，动态改变...
圆形箭头的加载组件.zipIOS应用例子源码下载
03-06
圆形箭头的加载组件.zipIOS应用例子源码下载圆形箭头的加载组件.zipIOS应用例子源码下载 1.适合学生学习研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
ES6中的箭头函数实例详解
08-30
主要介绍了ES6中的箭头函数,结合实例形式详细分析了ES6中箭头函数的基本语法、特性、使用方法与相关注意事项,需要的朋友可以参考下
10.v-for循环对象数组.html
luzhensmart的专栏
11-18 474
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;met
vue 组件之间传值 父转子，子传父，同级别之间的传参，跨级别传参
烎烎的博客
12-18 1319
写这篇文章之前，我对vue组件之间的传值，还是只知道一些基础的传值方式。虽然工作中勉强能够应对，但是想要行云流水感觉还是心有余而力不足，所以在此，我想总结一下vue组件之间的一些传值方式供大家参考，同时也是给自己加深下记忆。 vue的传值方式大概分为以下几种 父传子 子传父 兄弟间 隔代传参 首先我们介绍下第一种 父传子： 父传子方式1：最常用的就是props传值，这种方式大家都很熟悉...
ES6中的箭头函数
weixin_45763192的博客
10-20 210
1： 箭头函数和普通函数的区别 普通函数分为匿名函数和函数声明两种基本方式； 函数表达式也是一种匿名的函数； var fun = function() { console.log('这是匿名函数'); } fun(); function fun2() { console.log('这是函数声明'); } fun2(); 以上是普通...
【ES6】箭头函数
青山野火
02-25 1624
文章目录一、箭头函数是什么？二、用法详解1.箭头函数的参数2.箭头函数的函数体3.箭头函数与普通函数变量提升this的指向箭头函数不可以作构造函数不可以使用arguments对象总结 一、箭头函数是什么？ ES6 允许使用“箭头”（ => ）定义函数。 let foo = v => v; // 上面的箭头函数等同于： let foo = function(v) { return v; }; 箭头函数(=>）的左边是参数，右边是函数体。 二、用法详解 1.箭头函数的参数 当..
对阮一峰《ES6 入门》中箭头函数 this 描述的探究
tanzhou123的博客
05-04 2056
前言 昨日，发了一篇公众号文章： 原文链接：别低估自己，但，这道题，真的有点难 在部分群里引起了一些讨论，其中有一点是关于箭头函数的 this 指针的问题。使用了阮一峰《ES6 入门》文章的内容来反驳。 为了隐私，屏蔽掉了微信昵称： ryf_group 上述截图，来自阮一峰的《ECMAScript 6 入门》： this 下面我们就来看看箭头函数的 this 到底是啥样的，...
JavaScript 学习-8.JavaScript 箭头函数的使用
qq_27371025的博客
05-20 850
前言 ES6 中引入了箭头函数() =>。箭头函数不需要使用function关键字，允许我们编写更短的函数. 箭头函数 之前使用function 定义函数 fun1 = function() { return "Hello World!"; } console.log(fun1()); // Hello World! 使用箭头函数() =>格式 fun2 = () => { return "Hello World!"; } console.log(fun2()); // Hell
箭头函数
qq_44870324的博客
10-10 366
意义：箭头函数一般替代匿名函数。 箭头函数以箭头来区分和理解， 箭头左边是形参列表 ，箭头右边是函数体 注意：箭头函数传参时，一个参数时可以省略圆括号，多个参数时则不能省略圆括号。 // 例如 var f = a => {} var f = (a,b) =>{} 箭头函数有哪些特性? 1、箭头函数是匿名函数，不绑定自己的this,arguments,super,new,target ...
关于箭头函数的思考
weixin_34364135的博客
11-22 130
关于箭头函数的思考 自从有了ES6箭头函数这个灵活的功能，现在写函数都习惯写成箭头函数格式 () => {} 然而如果不理解箭头函数的原理，滥用它也会造成很大的影响。思考下面这个问题 let func = value => console.log(value) <!-- 区别 --> let func = fu...
怎么给箭头函数的参数赋值
weixin_35754962的博客
01-15 203
给箭头函数参数赋值可以在定义箭头函数时直接给参数赋值。例如： const myFunction= (param1 = "default value") => { // function code here } 或者是在调用箭头函数时给参数赋值 myFunction("new value") 可以在调用箭头函数时给参数赋值。 如果参数不是必须的，给参数默认值是一个很好的做法。 ...
vue3 父组件给子组件传值传一个方法 子组件里面的props用箭头函数怎么写
最新发布
03-29
如果父组件想要向子组件传递一个方法，可以在`setup()`函数中定义一个函数，并将其作为`props`传递给子组件。子组件可以使用`onUpdate`函数来接收该方法并将其保存到本地变量中，以便在需要时调用。 下面是一个简单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值