组件之间的数据共享

已于 2023-01-28 23:05:48 修改
阅读量65 收藏
点赞数 1
分类专栏： vue学习 文章标签： vue 前端
于 2023-01-27 23:53:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47794838/article/details/128773741
版权

1.组件之间的关系

在项目开发中，组件之间的最常见的关系分为如下两种：父子关系，兄弟关系

2.父子组件之间的数据共享

父子组件之间的数据共享又分为：

  1. 父->子共享数据
  2. 子->父共享数据

2.1 父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性。示例代码如下:
在这里插入图片描述

2.2子组件向父组件共享数据

子组件向父组件共享数据使用自定义事件。示例代码如下：
在这里插入图片描述

3.兄弟组件之间的数据共享

在vue2.x中，兄弟组件之间数据共享的方案是EventBus。
在这里插入图片描述

EventBus的使用步骤

  1. 创建eventBus.js模块，并向外共享一个vue的实例对象
  2. 在数据发送方，调用bus.$emit(‘事件名称’,要发送的数据)方法触发自定义事件
  3. 在数据接收方，调用bus.$on("事件名称’,事件处理函数)方法注册一个自定义事件
不想qiao代码
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue组件之间的数据共享
酷爱前端的小陈博客
04-24 1975
1. 组件之间的关系 在项目开发中，组件之间的最常见的关系分为如下两种： ① 父子关系 ② 兄弟关系 2. 父子组件之间的数据共享 父子组件之间的数据共享又分为： ① 父 -> 子共享数据 ② 子 -> 父共享数据 2.1 父组件向子组件共享数据 父组件向子组件共享数据需要使用自定义属性。示例代码如下： 2.2 子组件向父组件共享数据 子组件向父组件共享数据使用自定义事件。示例代码如下： 3. 兄弟组件之间的数据共享 在 vue2.x 中，兄...
关于组件之间的数据共享（超详细，一看就会）
gsx257318的博客
10-17 911
组件之间的数据共享
vue 组件之间的数据共享
weixin_47124112的博客
07-09 939
在项目开发中，组件之间最常见的关系分为两种：2.1 父组件向子组件共享数据需要使用 自定义属性 。示例代码如下：子组件中 msg 的值是父组件中message复制过来的，两个彼此独立的(传简单类型) 子组件中 user 传过的是对象的引用与父组件指向的是同一个内存(传复杂类型)2.2 子组件向父组件共享数据使用 自定义事件 。示例代码如下：在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。EventBus 的使用步骤① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对
Vue 组件间数据共享
m0_67999058的博客
06-09 764
子组件可以通过props来接收父组件传来的数据，当我们想把父类传来的数据改变时候同步到父类绑定的数据的时候可以在父类使用v-model来改变父类数据，无需在父类中定义函数接收。在子组件中通过emits数组自定义事件，可以在组件调用方法的时候来触发自定义事件向父组件传值，父组件要用自定义事件来接收子组件传来的值。子组件定义props数组，数组中是自定义属性名，父组件导入子组件，使用子组件定义属性，当做标签属性进行绑定数据传值。父组件通过provide来提供共享数据，子孙组件通过inject来接收共享数据。
Vue组件之间的数据共享详解
zxdznyy的博客
10-10 1088
组件之间的关系有父子关系与兄弟关系，在项目中，经常会遇到组件之间数据共享的问题。本篇博客针对此问题进行讲解，希望能对读者有帮助！我们先前已经介绍了父子组件的数据传递方式。其中，父组件给子组件传递数据，需要借助props，而子组件给父组件传递数据，需要借助自定义事件$.emit()，而兄弟组件之间传递数据的方式则需要借助EventBus。通俗来说，EventBus是一个vue实例，是平行组件的沟通桥梁。这个文件也是兄弟组件进行数据传递核心，同时，两个兄弟组件都需要引入这个js文件。
vue实现两个组件之间数据共享和修改
静幽水
10-26 8109
我们在使用vue开发过程中会遇到这样的情况，在父组件中引入了子组件，需要将父组件的值传到子组件中显示，同时子组件还可以更改父组件的值。 以我目前的一个项目的开发为例，如下图页面： 在父组件中，我引入了两个子组件，一个是左边的导航栏，还有中间的一个富文本编译器组件，当我点击左边导航栏时，中间的页面会切换，也就是改变引入的子组件。 怎么实现呢，首先，设置在该页面index.vue中设置一个变量ind...
Vue----组件之间的数据共享
emmmm.....
04-26 1050
文章目录1 组件之间的关系2 父子组件之间的数据共享2.1 父组件向子组件共享数据2.2 子组件向父组件共享数据2.3 父子组件之间数据的双向同步3 兄弟组件之间的数据共享3.1 安装 mitt 依赖包3.2 创建公共的 EventBus 模块3.3 在数据接发送方触发事件3.4 在数据接收方自定义事件4 后代关系组件之间的数据共享4.1 父节点通过 provide 共享数据4.2 子孙节点通过 inject 接收数据4.3 父节点对外共享响应式的数据4.4 子孙节点使用响应式的数据5 vuex6 总结
Vue3基础（3）——组件生命周期、watch、组件之间数据共享
SongD1114的博客
04-08 1323
Vue3.0 组件生命周期、watch、组件之间数据共享
Vue2学习（4）vue组件生命周期+组件之间数据共享
weixin_47758346的博客
03-17 2914
Vue2学习（4）vue组件生命周期+组件之间数据共享
JetPack 初见 - 使用 LiveData 实现组件之间数据共享
Junerver的博客
07-25 3115
18年谷歌退出了新的开发套件 JetPack （喷气背包），本文将浅显的讨论一下其中 LiveData 的一些使用方法与注意事项。 1. LiveData 是什么？ LiveData 是一个可观察的数据持有者类。与常规observable不同，LiveData是生命周期感知的，这意味着它关注其他应用程序组件的生命周期，例如 Activity，Fragment 或 Service。这确保了 Liv...
用react-redux实现react组件之间数据共享的方法
08-27
主要介绍了用react-redux实现react组件之间数据共享的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue实现两个组件之间数据共享和修改操作
01-18
我们在使用vue开发过程中会遇到这样的情况，在父组件中引入了子组件，需要将父组件的值传到子组件中显示，同时子组件还可以更改父组件的值。 以我目前的一个项目的开发为例，如下图页面： 在父组件中，我引入了两个...
cache-store:数据缓存，支持 React 组件之间数据共享
05-25
cache-store数据缓存，支持 React 组件之间数据共享。USAGEvar store = require('cache-store');class Foo extends React.Component { constructor(props) { super(props); store.set('name', 'Foo'); // 触发 store...
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
10-15
主要介绍了vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 170
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 686
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1138
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
综合性练习-验证码
cj13106811623的博客
05-15 834
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
【VueRouter 的基本使用】
2302_76611599的博客
05-17 176
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
vue跨组件传参 数据共享
08-10
在Vue中，有几种方式可以实现跨组件传参和数据共享： 1. Props/emit：父组件通过props属性向子组件传递数据，子组件通过emit事件向父组件发送数据。这种方式适用于父子组件之间的数据传递。 2. Vuex：Vuex是Vue的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值