vue的props正向传值及通过事件逆向传值

最新推荐文章于 2024-05-09 04:28:12 发布
最新推荐文章于 2024-05-09 04:28:12 发布
阅读量1.8k 收藏 11
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45369963/article/details/105951843
版权

组件传值有两种方式
一、正向传值，就是所谓的父组件向子组件传值
在这里插入图片描述
下面直接看图片上的代码

父组件
在这里插入图片描述
子组件
在这里插入图片描述
效果 红色框里面的是父组件传给子组件的数据
在这里插入图片描述

二、逆向传值，子组件向父组件传值 通过事件来触犯
1、先在子组件里面创建一个事件，用来抛出数据
在这里插入图片描述
2、在methods函数里面创建自定义事件抛出（抛出的是需要传递给父组件的数据）
通过 this.$emit(“抛出的自定事件的名字”，抛出的数据)
在这里插入图片描述
3.接受自定事件，在子组件被调用的时候接受 @抛出自定事件的名字=“调用的函数不加()这个函数需要创建在父组件中在这里插入图片描述
4、在这个函数中有一个形参（vue会自动的吧抛出的数据赋值给这个形参）
在这里插入图片描述
效果 在这里插入图片描述
点击—点我之后 我是父组件默认数据将变成下图红色框里面的
在这里插入图片描述

weixin_45369963
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vue中实现简单页面逆传值的方法
08-28
vue是一个单页应用，轻量，并且不会重复下载数据。当它从一个页面跳转到另一个页面时，原来的页面的vue实例和相关数据已经销毁了，要实现逆传值就要找到操作的对象及它的一些属性
组件传值---------- 1.正向传值（vue2和vue3的区别）
hyy_20021212的博客
12-01 184
父组件通过v-bind绑定一个数据传递给子组件，子组件通过props接收到就可以在子组件的html中使用了。但是，如果父组件v-bind传递给子组件，子组件没有用props接收的话，这个时候，父组件传递过来的数据就会被挂载(赋值)到这个子组件自带的对象$attrs上面。3.如果组件有多个父组件 那么每次被调用的时候$parent会指向不同的父组件(这条就决定了$parent不会在工作用使用太多 因为不好确定他的父组件是那个)-- 在子组件被调用的地方 把props的参数当成属性进行传值 -->
Web前端最新vue2如何进行逆向传值_vue app 逆向，太爽了
最新发布
2401_84433535的博客
05-09 324
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】父组件将值传递给子组件，叫做正向传值，子组件将值传递给父组件，叫做逆向传值；需要借助 自定义事件 2、vue.js 中允许正向传值，所以正向传值不需要条件触发，是主动的；逆向传值，是不允许的，需要主动（手动）触发。
vue简学之路（案例七）组件 组件通信之 父子组件正向传数据
qq_44014971的博客
01-05 152
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值正向传值props，将组件变为动态</title> <script src="vue.js"></script> </he...
vue的逆向传值、 同胞传值、 跨组件传值、 slot 插槽
qq_58982380的博客
05-21 1284
逆向传值–自定义事件 子组件 把数据传递到父组件之上 逆向传值 默认是不被允许的 我们需要借助一些其他知识来完成逆向传值（自定义事件辅助） 1.必须在子组件中通过事件来触发 <template> <div> zizizzizi <!-- 1.通过事件触发一个函数来完成逆向传值 --> <button v-on:click="fun()">点我进行逆向传值么么哒！！</button> </div&g
vue props传值失败 输出undefined的解决方法
10-18
今天小编就为大家分享一篇vue props传值失败 输出undefined的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue组件props传值对象获取不到的问题
10-16
主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue 组件间传值及事件触发Demo
09-07
1. `props` 下传：父组件向子组件传递数据是最常见的传值方式，通过在子组件定义`props`属性接收父组件传递的值。例如： ```html <!-- 父组件 --> <child-component :parent-value="valueFromParent"></child-...
Vue父子模版传值及组件传值的三种方法
08-28
本文将介绍三种常见的父子模板传值及组件传值的方法，适用于Vue 1.0版本。对于Vue 2.0及更高版本，官方文档提供了更详尽的指南，推荐查阅官方文档以获取最新和最准确的信息。 ### 第一种：Prop绑定 这种方法是最...
详解vue父子组件间传值(props)
08-30
本篇文章主要介绍了详解vue父子组件间传值(props)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
组件传值---------- 2.逆向传值（vue2和vue3的区别）
hyy_20021212的博客
12-02 518
在vue3中如果直接给子组件绑定一个ref，那么是什么都拿不到的，ref方式传值：需要在子组件使用defineExpose（子组件暴露自己的属性）把ref绑定到子组件身上,那么就可以得到当前这个子组件的所有信息,包含他的data数据,从而完成了逆向传值.emit事件分发，用于子传父，如果子组件的数据想传递给父组件，就是用emit（逆向传值）context.emit("zipao",'我是子组件的数据')// this.$emit("自定义事件的名字",你要传递的数据)
Vue---反向传值
cjx177187的博客
09-15 507
注意：父组件传值一定要用v-model ，子组件接受值用value 利用$emit绑定事件时使用input为参数。3.子组件中利用this.$emit出发事件并向父组件传值。4.父组件中调用自定义事件绑定的函数，并接受子组件传参。利用组件的自定义事件反向修改父组件的值------father的数据-----father的数据-----father的数据-----father的数据-----father的数据-----child2的数据---child3的数据---tboxs.vue文件。
vue传值(子向父 && 父向子)
小李不吃肉
06-13 1909
1:父级向子集传值 方法（1）子组件接受一个数组 <div id="app"> <mycom :title='title' :contnt ='content'></mycom> </div> const vm = new Vue({ el: "#app", d...
iOS ---属性传值--正向界面传值
iotjin的专栏
10-12 983
//在view1里的  .h    里 声明一个要发送数据的文本框 @property (weak, nonatomic) IBOutlet UITextField *Phone;//手机号 //在view1里的  .m    里   #import "view2.h"   在点击按钮的事件里写下列内容 { /
vue通讯 传值 3大传值方法 快速上手 父子间传值和非父子间传值
web全栈开发的博客
07-01 221
本篇文章给大家带来的内容是关于vue的传值方式有哪些？vue中常用的传值方式介绍（3种），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 一. 父组件向子组件传值 使用props建立数据通道的渠道 // 这是父组件 // 这是子组件 <child message="hello" ></child> 2 . 在子组件中通过props传递过来的数据...
vue简学之路（案例八）组件子组件向父组件逆向传值
qq_44014971的博客
01-05 237
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子组件向父组件传值，通过触发自定义事件进行传值</title> <script src="vue.js"></script> </he...
vue 传值的几种方式
my_roads的博客
10-03 4988
1.父子传值 第一步： 在父元素中绑定一个参数 我这里的是： :id="updateId" 第二步： 在子元素中接受，使用props接收。 2.子向父传值 第一步： 在子组件中触发 我这里并没有传值，如果需要传值，就：self.$emit('updates', '你要传的值'). 第二步： 在父元素监听事件 传参的直接在updates (参数)
正向反向传值
lzy641的专栏
09-14 392
准备好两个页面。代码创建。 通过storyboard 。presentViewController显示生成的第二个页面。 正向传值：点击一下按钮，第一个页面的值，传到第二个页面。 第一个页面传给第二个页面。需要第二个页面准备好东西接收。 在.h中。在跳转之前，让目的地的属性值等于当前的变量值。A创建的B，A往B传就是正。B往A传就是反向。第二个页面 也由button 和tf 第二页面 返
vue props父子传值
05-01
Vue是一种用于构建Web界面的JavaScript框架，props是Vue中用于进行组件间传值的机制，可以说是父子组件间传递数据的主要方式。 Vue中的props被用来传递数据，但是props传递到子组件中的数据是只读的，也就是无法在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值