总结：vue的通信方式

已于 2022-07-05 20:09:03 修改
阅读量755 收藏 1
点赞数 1
分类专栏： vue 文章标签： props eventBus provide broadcast 通信
于 2022-06-30 11:06:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41564215/article/details/125536606
版权

方法一：父子组件之间的通信：props/$emit。

Props | Vue.js

emits 选项 | Vue.js

方法二：中央事件总线，通过一个空的vue实例作为EventBus，用来触发、监听事件，实现了任何组件之间的通信。

Vue事件总线（EventBus）使用详细介绍_慕课手记

方法三：vuex，专门为vue.js设置的状态管理模式，全局共享状态，响应式。

Vuex 是什么？ | Vuex

方法四：多级组件嵌套：$attrs、$listeners（移除）。

实例 property | Vue.js

移除 $listeners | Vue.js

方法五：祖先向子孙传递数据：provide/inject

Provide / Inject | Vue.js

方法六：直接获取组件实例：$parent/$children/ref

实例 property | Vue.js

方法七：同域多个页面间通信：广播 BroadcastChannel

BroadcastChannel - Web API 接口参考 | MDN

大名人儿
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
broadcast-channel:BroadcastChannel在不同的浏览器选项卡或nodejs进程之间通过通道发送数据+ LeaderElection
03-30
广播频道 在不同的浏览器选项卡或nodejs进程之间发送数据的BroadcastChannel +领导者通过渠道选举 一个BroadcastChannel，允许您在不同的浏览器选项卡或nodejs进程之间发送数据。 它完全可以在客户端和离线运行。 在旧的浏览器，新的浏览器， WebWorkers ， iframe和NodeJs上进行了测试 此行为类似于目前仅在提供的 。 使用广播频道 npm install --save broadcast-channel 在一个标签页/进程中创建一个频道并发送一条消息。 import { BroadcastChannel } from 'broadcast-channel' ; const channel = new BroadcastChannel ( 'foobar' ) ; channel . postMessage ( 'I am not
vue跨标签页通信（BroadcastChannel）方案
qq_873366938的博客
05-30 1513
日常业务开发中我们常常会碰到如下的场景，即两个标签页之间的通信问题。我们在第一个标签页如何执行操作后在第二个标签页获取到信息。首先我们需要创建一个可以在多数环境下都可以快速使用的方法，在工程的任意位置创建一个可以访问的。创建比代理的东西，一个引用类型且被代理的东西肯定是不会允许克隆的，毕竟大家指向的地址是同一个。并没又直接获取到反而在发送的时候就报错了,再仔细看看发送的消息。文件，当然你可以叫它任何你想叫的名字。为我们提供了一种快捷且高效的途径。2.创建发送及接收的方法。发送消息标签页的使用。
VUE--使用BroadcastChannel频道实现同源策略不同工程页面通信
最新发布
爱吃棉花糖#的博客
05-23 267
VUE--使用BroadcastChannel频道实现同源策略不同工程页面通信
Vue之前端Broadcast Channel API的简单使用
weixin_42949219的博客
01-31 1269
在发送消息的页面中，首先需要创建一个 Broadcast Channel，可以使用 new BroadcastChannel(channelName) 构造函数。它允许一个页面向另一个页面发送消息，这些页面可以在同一浏览器实例中打开，或者在不同的浏览器实例中打开。在接收消息的页面中，同样需要创建一个同名的广播频道，并通过 addEventListener 监听消息事件。，否则重新进入页面时会再次创建一个监听器，上次创建的监听器还存在，这样的话每次进入页面都会创建一个。在这个示例中，我们在Vue实例的。
使用 BroadcastChannel 实现跨标签页通信及页面跳
织网的博客
02-23 493
与Vue Router相结合，我们不仅可以实现跨标签页的数据同步，还能灵活控制页面间的跳转，极大提升了用户体验和应用的一致性。在现代Web应用程序开发中，尤其是基于Vue.js构建的单页面应用（SPA），跨标签页的数据同步与页面控制是一项常见需求。设想这样一个场景：用户在一个标签页内完成了某个重要操作（例如登录成功），这时我们希望在所有打开的同一应用的其他标签页内同步这一状态，并自动跳转至主界面。API和Vue Router来实现跨标签页通信，并在此基础上实现在接收特定消息后进行页面跳转的功能。
vue 跨标签页的数据共享(即跨标签页通信)
UserGuan的博客
11-07 3025
指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下，每个标签页都是一个独立的浏览器上下文，它们之间是相互隔离的，无法直接访问对方的数据或进行通信。跨标签页通信的目的是允许这些相互隔离的标签页之间进行信息共享和交互。通过跨标签页通信，可以实现数据的共享、状态的同步、消息的传递等功能。例如：在一个标签页中进行了某个操作，希望其他标签页能够及时获得相关的变化和通知，就需要使用跨标签页通信机制来实现这种交互。
前端跨页面通信
weixin_45137240的博客
06-02 486
来忽略同源策略，可以在每个页面中嵌入一个iframe，iframe的src都使用同一个url，因此属于同源页面，在通信上可以复用上面同源页面的各种通信方式。打开页面时，该方法会返回一个被打开的页面的window引用，而在未显示指定noopener时，被打开的页面可以通过。opener属性：可读可写，可返回对创建该窗口的window对象的引用（父窗口的引用），可使用它的属性和函数。3、消息接收方，需要展示数据，还需要将消息再传递给它所知道的页面（打开它与被它打开）
vue中各种通信传值方式总结
12-29
路由通信是通过路由跳转用query把参数带过去，也是vue常用的通信手段。 例子：创建并在路由注册一个组件Head <button @click=handleChange>clickMe</button> //给按钮绑定点击事件 [removed] ...
VUE组件练习：VUE.rar
11-30
10. **路由管理（Vue Router）**：Vue Router是官方推荐的路由管理工具，它允许在单页面应用中轻松实现导航和页面间的通信。 在VUE08这个组件中，可能包含了组件的创建、数据绑定、事件处理、生命周期方法的使用等...
album:vue相簿
03-27
总结起来，“Vue相簿”项目展示了现代Web开发的典型流程，结合了Vue.js的前端开发优势、Heroku的便捷部署、GitHub Pages的静态托管服务以及Travis CI的自动化构建，为创建动态相册提供了一套完整的解决方案。...
vue组件间通信六种方式（总结篇）
01-19
前言 组件是 vue.js最强大的功能之一...本文总结了vue组件间通信的几种方式，如props、 $emit / $on 、vuex、 $parent / $children 、 $attrs / $listeners 和provide/inject，以通俗易懂的实例讲述这其中的差别及使用
vue一个页面改变cookie的值，另一个页面怎么同步监测cookie值的变化，并更新页面数据
hyx_wake的博客
02-28 3599
在Vue中结合Broadcast Channel API，可以实现一个页面改变cookie的值，其他页面能够监测到这个cookie值的变化，并更新页面数据的功能。通过以上方式，我们就可以在Vue中结合Broadcast Channel API，实现不同页面之间的双向通信，从而实现对cookie值的监测和数据更新。在其他需要监测cookie变化的页面中，监听Broadcast Channel API的通知，当接收到通知时，更新页面数据。生命周期中，创建Broadcast Channel对象，并监听。
超详细 vue组件通信的10种方式
鹏多多的博客
02-08 5815
vue：超级详细，项目常用的十种组件通信方式
vue组件通信6种方式总结（常问知识点）
bb_xiaxia1998的博客
11-04 1967
在子组件中可以通过$emit向父组件发生一个事件，在父组件中通过v-on/@进行监听。子组件 ComponentA：
同源多页面实时通信之BroadcastChannel实现及简单封装
是小宗啊？的博客
10-14 2044
BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。简单来说，就是需要在同源的情况下，实现浏览器多窗口实时进行通信，且该通信是广播进行的。
BroadcastChannel全解析
不近视的猫的博客
08-05 1350
对于 channel 而言，更多面向的是一对一的情况，因为一旦receive()后，该数据就被获取了，后续再receive()，也无法拿到之前的数据。但是，类似的，Flow 与 sharedflow 是相对应的，与 channel 相对应的是 BroadcastChannel。...
vue 跨页面双向通信
weixin_45076451的博客
11-11 5246
vue 跨页面双向通信 一、同源通信 1、localStorage 添加时间监听 window.addEventListener('storage', function (e) {}); 改变 localStorage 值，触发 storage 事件 window.localStorage.setItem('params', JSON.stringify(object)); 2、通过跳转 url 传参 // 跳转路径带参数 3、通过 BroadCast channel 广播实现通信 // 创建一个广播
vue组件通信
qq_67983277的博客
11-09 712
vue组件通信
超详细的vue组件之间通讯的8种方式
weixin_70134200的博客
07-11 5609
想要深入了解 vue 组件之间的通讯，这一篇文章足矣，里面详细讲解了组织之间通讯的8种方式，一篇文章即可掌握组件通讯。
vue经常使用的组件通信的方法
03-11
总结来说，Vue 的组件通信机制提供了多种灵活的方式，开发者可以根据具体需求选择合适的方法。在实际开发中，应遵循最小侵入原则，避免过度使用某些通信方式导致代码复杂度增加。同时，随着 Vue 版本的更新，新的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值