19.组件之间传递数据

这篇具有很好参考价值的文章主要介绍了19.组件之间传递数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

不同组件传递数据的时候,最好不要直接传递复杂数据类型(比如对象,数组)

前端需要处理的数据层级一般不会很多,需要在多处使用的数据一般会被放到数据库中

目录

1  组件的关系

2  父向子传递数据-props

3  子向父传递数据-自定义事件

4  父子组件同步数据 v-model与emits

5  兄弟组件传递数据

6  任意两个组件传递数据 EventBus

7  向后代组件提供数据 provide与inject

7.1  基本使用

7.2  让数据可变

8  vuex


1  组件的关系

我们通常认为组件的关系只有两种,父子关系与兄弟关系

像A与G,我们认为AG是父子关系,A为G的父组件

像B与E,我们认为BE是兄弟关系,BE互为兄弟组件

19.组件之间传递数据

我们现在搞三个组件,在App.vue中只展现FATHER组件

19.组件之间传递数据

FATHER组件中展示SON1组件

19.组件之间传递数据

SON1组件是下面这样的,SON组件的文字颜色都是红色的

19.组件之间传递数据

这三个组件的关系是这样的,App是FATHER的父组件,FATHER是SON1的父组件

19.组件之间传递数据

2  父向子传递数据-props

我们现在想让父组件给子组件传递数据,我们使用props的方式

首先子组件要接props

19.组件之间传递数据

父组件要发props,props绑上FATHER组件的data

19.组件之间传递数据

打开后是这样的

19.组件之间传递数据

我们修改父组件的数据,会发现子组件的内容发生了改变

19.组件之间传递数据

如果你使用props传复杂数据(比如对象)给子组件,只是传递了引用过去,如果你在子组件对复杂数据修改是会作用于父组件的data的(不建议在子组件修改数据,因为最好将props当作只读数据)

在修改数据的时候要从 父组件修改,如果修改父组件的数据,那么子组件的数据会自动发生改变,如果从 子组件修改,那么只会改动子组件的数据(会出 不建议修改props的警告),父组件的数据不会发生变化

3  子向父传递数据-自定义事件

子组件向父组件传递数据需要通过method的方式来搞

红色框是 子向父传递数据有关的代码,橘黄色是数据的传递过程,黄色是函数的触发过程

  • $emit是用代码触发自定义事件用的,第一个参数是要触发什么自定义事件,第二个参数是这个自定义事件带的数据(可以理解为自定义事件的事件对象)

刚打开页面的时候,不会接到子组件的数据

19.组件之间传递数据

当我们点击 内容为1号子组件的p标签 的时候,黄色箭头开始行动,最后让父组件收到子组件的数据

19.组件之间传递数据

你可以在 子组件 中声明这个自定义事件,声明与否不影响使用

19.组件之间传递数据

点击后可以触发事件

19.组件之间传递数据

4  父子组件同步数据 v-model与emits

子定义method,父使用v-model

自定义事件的名称的格式必须为 update:[props的名字]

19.组件之间传递数据

打开后是这样的

19.组件之间传递数据

点击子组件+1后,父子的count都会+1

19.组件之间传递数据

点击父组件+1后,父子的count也都会+1

19.组件之间传递数据

5  兄弟组件传递数据

兄弟之间传递数据,可以用 兄弟A -> 父 -> 兄弟B

6  任意两个组件传递数据 EventBus

EventBus不仅局限于兄弟间传值,子向父,父向子,两个任意的组件都可以使用EventBus进行通信

在 vue2 中,兄弟组件之间数据共享方案为EventBus,详情可以看一下这个 Vue2.0-27.兄弟组件数据共享 - 演示EventBus的使用_哔哩哔哩_bilibili

19.组件之间传递数据

在vue3中移除了$on这个接口,所以我们不能像2一样写了,但也有替代方法,安装第三方包 mitt

  • 方法参考 Vue3全局组件通信之EventBus - 简书

19.组件之间传递数据

安装之后创建一个eventBus.js,我现在让SON1传递数据给SON2,所以我直接放在他们的同级目录下

19.组件之间传递数据

我这里的eventBus.js用的是尽可能不改老项目的方法,如果是新项目,你可以使用 mitt().on()与mitt().emit()

19.组件之间传递数据

19.组件之间传递数据

7  向后代组件提供数据 provide与inject

7.1  基本使用

后代关系就是爷孙关系这种,父子关系也包含在后代关系中

我们现在在app组件中使用 FATHER3,然后再FATHER3中使用SON6。这样APP与SON6就构成了后代关系

19.组件之间传递数据

使用provide提供数据,使用inject接受数据,然后正常使用就行了

19.组件之间传递数据

19.组件之间传递数据

7.2  让数据可变

默认情况下 provide 是不可变的,在调试工具中你发现他修改不了

19.组件之间传递数据

在我们加入 data 中转一下后,provided依然不会变

19.组件之间传递数据

打开后是这样的

19.组件之间传递数据

修改data没有改变provided

19.组件之间传递数据

如果你想让provided发生变化,你应该这样写

19.组件之间传递数据

这个时候当你修改data的时候,provided也会被修改,子组件也会接到新的数据

19.组件之间传递数据

值两边的双引号不是我们想要的,接受的时候使用 .value 可以直接获取值

19.组件之间传递数据

这样就直接拿到值了

19.组件之间传递数据

8  vuex

vuex将数据放在STORE中供每一个组件使用,等后面有使用到会再更新vuex的使用方式

19.组件之间传递数据文章来源地址https://www.toymoban.com/news/detail-494101.html

到了这里,关于19.组件之间传递数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Windows和Linux之间如何传递数据|两台Linux之间如何传递数据

    摘要:我们租用了一台服务器,然后我们想要把我们写的项目上传到自己的Linux服务器中,那么我们应该怎么上传呢?如果我们想要从服务器中下载一些资料,那么又该如何进行呢?看这篇文章将会告诉你答案。 把数据从本地电脑上传到Linux服务器的方式有很多,这里介绍最

    2024年02月03日
    浏览(45)
  • Postman接口之间传递数据 实现接口关联

    在我们使用Postman进行接口测试的时候,经常会遇到一个接口的返回结果是另一个接口所需要的请求参数。 例如 :我们再测试时,一般需要先去调用登录接口,进行登录,并返回 token 相关信息,随后我们进行调用其它接口时可能会需要携带 token 来完成对应接口所实现的功能

    2023年04月21日
    浏览(46)
  • feign微服务之间传递请求头数据

    直接在微服务远程调用中获取请求头数据不能直接获取到.为什么? 看源码 默认情况下feign远程调用的时候不会传递请求头! 远程调用源码: 每一次远程请求的时候都创建了一个新的Request Template对象,在该对象中不包含之前的请求头数据 解决方案: 方案一:在feign接口上添加对应

    2024年02月06日
    浏览(45)
  • 小程序页面之间数据传递的五种方法

    使用 wx.navigateTo() 时,在 url 中拼接,这种方法适用于数据量少的情况 跳转前A页面在 url 中拼接参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 分隔; 跳转到B页面在生命周期函数 onLoad 中接收 如果需要传递对象或数组,需先将对象或数据转为JSON字符

    2024年02月10日
    浏览(47)
  • 前端HTML网页之间传递数据多种办法,附代码案例

       目前常用的有三种办法 session传递,cookie传递,url传递 url会暴露参数,其余的两个是保存在服务端和浏览器中,不会暴露在地址栏里面 使用url:   下面依次介绍 案例说明:  在HTML1中,我们使用 form 标签将数据提交到HTML2页面,并设置 method 为 post , action 为HTML2的文件路

    2024年02月09日
    浏览(104)
  • 页面跳转和两个页面之间的数据传递-鸿蒙ArkTS

    本篇文章主要是对两个页面之间数据传递进行实现。 页面跳转和参数接受是通过导入 router 模块实现。 router.pushUrl() 跳转到指定页面。 router.replaceUrl() 替换当前页面并销毁。 router.back() 返回上一个页面。 router.getParams() 获取上一个页面跳转过来携带的参数。 router.clear() 清空当

    2024年02月12日
    浏览(62)
  • Android Studio中如何在Activity跳转之间传递数据

    使用Intent操作可以完成两个Activity之间的跳转,有时候也相应的需要在两个跳转活动之间传递数据,这篇就详细的介绍一些在Android开发中一些基础的活动跳转时传递数据的方法 调用PutExtra()方法 由于Activity之间的数据传递有许多不同种类型,所以在Inten类中提供了多个重载的

    2023年04月08日
    浏览(77)
  • Vue前端框架10 组件的组成、组件嵌套关系、组件的注册方式、组件传递数据(props $emit)、数组传递多种数据类型、组件传递props校验、组件事件

    组件最大的优势就是可复用性 通常将组件定义在.vue中,也就是SFC单文件组件 组件的基本组成: 组件允许我们将UI划分为独立的、可重用的部分,并且对每个部分单独思考 实际应用中组件常常被组件成层层嵌套的树状结构 Vue组件使用前要注册,注册有两种方式:全局注册和

    2024年02月09日
    浏览(50)
  • Mysql不同数据库之间表结构同步

    开发环境的Mysql表结构做了修改,要同步到其他环境数据库中使用数据库管理工具JookDB的表结构同步功能就很方便。虽然Navicat也有这个功能但是有免费的当然是用免费的。 用JookDB添加数据库后在数据库节点上右键选择“同步结构”即可开始表结构同步。 1.选择结构同步的源库

    2024年02月05日
    浏览(52)
  • Android不同APP之间共享数据的方式

    今天给大家介绍三种不同APP之间共享数据的方式 第一种:使用SharePreference 使用SharePreference共享数据 第二种:使用ContentProvider, 这个就不仔细讲了,大家看看其他文章吧 第三种:sharedUserId 通过SharedUser id,拥有同一个User id的多个APK可以配置成运行在同一个进程中.所以默认就是

    2024年02月10日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包