平行组件（兄弟组件）通信

最新推荐文章于 2024-08-23 13:45:37 发布
最新推荐文章于 2024-08-23 13:45:37 发布
阅读量226 收藏
点赞数
文章标签： vue.js html5 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44822110/article/details/104782634
版权
这篇博客探讨了在 Vue.js 框架中，如何在平行（兄弟）组件之间进行通信。主要介绍了在 `mounted` 生命周期钩子中使用 `$on` 监听事件，以及通过 `$emit` 触发事件的方法。同时提到了利用 HTML 和 JavaScript 进行辅助通信的角色。
摘要由CSDN通过智能技术生成

平行组件（兄弟组件）通信

mounted 生命周期
$on 立即执行
$emit 快速触发事件
HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平行组件通信</title>

</head>

<body>
    <div id="seg1"
最低0.47元/天 解锁文章
吃瓜的阳大王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
兄弟组件之间通信
m0_65642423的博客
08-30 1384
兄弟组件之间通信 兄弟没有共同的父级
vue--平行组件通信
qq_39111062的博客
05-27 474
js代码： /*平行组件通信*/ var event = new Vue(); Vue.component("me",{ template:'&lt;div&gt;我说：&lt;input type="text" v-model="mesaid" @keyup="onChange"&gt;{{mesaid}}&lt;/div&gt;', data:function(
12.平行组件通信
qq_26703533的博客
08-09 284
&lt;div id="parallel"&gt; &lt;first&gt;&lt;/first&gt; &lt;second&gt;&lt;/second&gt; &lt;/div&gt; var Event = new Vue();//事件调度器，将第一个组件里的first_say与第二个组件里的first_say绑定 Vue.component('first',
组件通信之平行组件之间的通信
zhang_dao_shi_的博客
10-05 345
说完父子组将的通信，这里写一下平行组件之间的通信 看一下关系图这里创建三个组件，其中App组件作为父组件，包含着A，B两个子组件，现在我们要实现的是A，B两个平行组件之间的传值。 具体到要实现的功能是：给B组件初始化一个count值，A组件为一个点击按钮，每次点击A中的按钮，B中的数值加1。下面看代码实现： 解释：这里我们在全局注册了A,B连个组件，然后写入了App组件中。具体到怎么实现点击A组件来触发B组件呢。①首先，我们new一个Vue实例，取名为bus，来帮助我们实现后面的传值。②在B组件的creat
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
刘大猫
04-28 1531
文章目录一、案例概述二、代码准备工作：案例1.1：父组件向子组件传值（或者叫：子组件使用父组件属性）案例1.2：子组件向父组件传值（或者叫：子组件调用父组件方法）,修改父组件属性案例1.3：父组件调用子组件方法，修改子组件属性值案例1.4：父组件直接修改子组件属性值案例2.1：平行组件之间通信：Student2组件内打印展示Student1组件传递过来的属性案例2.2：平行组件之间通信：Student2组件内调用Student1组件方法修改Student1组件属性三、html项目页面实现平行组件通信案例本.
Vue知识点总结(13)——组件通信-平行传值（超级详细）
CreatorRay的博客
01-03 804
hello，同学们，之前我们已经学习了组件通信中的父传子和子传父。 今天我们要学习的内容是组件通信中的平行传值。 平行传值是什么意思呢？ 就比如你和哥哥、弟弟、姐姐、妹妹的关系，就是平辈的关系。 之前我们使用组件的时候，通过使用和被使用，会产生一个父子关系。 平行组件不存在这个关系。 <div id="app"> <App></App> </div> <script> const bus = new Vue(); Vue.
Blazor—— 父子组件、嵌套组件以及平行组件，他们到底是如何交互通信的呢？
不忘初心
04-16 4545
前言 现在的前端开发，几乎都是基于组件的研发模式，即把每一块独立的功能切割成独立的组件，然后在大组件里根据需要自由组合这些小组件，使得组件的复用性提高，而小组件更容易测试和修改，从而提升研发的效率。比如按钮、文本框、对话框、点评星星等等都是可以被任意复用的小组件。 那么问题来了，组件之间是怎么进行通信呢？
Vue组件通信实践记录（推荐）
12-11
3. **平行组件间的通信**： - 方法A：使用全局事件总线（Event Bus），创建一个 Vue 实例作为事件总线，通过 `$emit` 发布事件和 `$on` 监听事件实现通信。 - 方法B：通过父组件的 `$refs` 找到兄弟组件，但要求...
vue2.0路由及兄弟组件通信
shunchenggong的博客
09-16 3084
最近在学习用vue2.0进行项目的开发，由于接手项目的时候，项目的完整架构已经搭建完毕，为了不破坏之前的项目，我就采用了比较古老的写法，说实话不采用es6的语法去写，有好多事情都变得比较麻烦了，不过原理还是一样的，之前有写过父与子 和子与父之间的通信，这次主要说的是兄弟组件的通信及vue路由的使用。 项目实景如下 ： 按照路由—-组件通信 —— 路由切换时的数据加载 方式来进行剖析
vue平行组件之间的通信
shu580231的博客
05-09 1963
平行组件之间的通信，需要借助一个空的vue对象。var Event = new Vue();发送依旧是用Event.$emit('自己定义的事件','需要发送的数据')，接收的时候，需要在钩子函数mounted中接收，用Event.$on('相对应的事件',回调函数function(msg){});发送数据：接收数据:...
vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全
weixin_34004750的博客
10-24 289
vue项目经常需要组件间的传值以及方法调用，具体场景就不说了，都知道。基本上所有的传值都可以用vuex状态管理来实现，只要在组件内监听vuex就好。 vue常用的传值方式以及方法有： 1. 父值传子（props） 　　1-1：解决一个项目中遇到的问题，父组件给子组件传值第一次子组件是可以接受的， 　　　　但是在父组件中这个值改变了，在子组件中这个prop的值还是第一次父组件传给的值。 2...
vue平行组件传值
qq_32538087的博客
08-24 460
我的是后台管理，要的效果是点击header上的收缩按钮，左边菜单栏跟着收缩变化。 我是把header,left,main分开写成组件，然后引入到一个公共组件中。common是父组件，header和left是子组件 header组件，点击事件，通过$emit给父组件common传已经改变的值 common组件中接收值并赋值给left left组件中用props接收，并绑定值 over,不知道你们能不能看的懂，写的不是很好。 ...
Vue 利用store实现两个平行组件间的传值
m0_37922443的博客
04-29 752
需求：把Login.vue的username传到Index.vue中显示出来 方法：利用store.js传值 Login.vue 登录后跳转 store.js 定义变量并从Login.vue中获取值 Index.vue 定义变量，利用computed获取变量的值 ...
VUE平行组件之间的传值--$emit和$on的使用
范范范国超的博客
01-15 523
需求：有三个组件A，B，C，需要把组件A和组件B中的数据传到C，并且组件ABC是平行关系。 实现的思路是：创建一个空的vue实例，把A和B的数据通过$emit获取，然后C组件通过$on接收。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
vue 单页面组件的2种传值方式
于歌于妳的博客
11-16 2133
一、路由传值（params:{id:a}） 需要传值的组件：                                   export default {       data(){         return{           a:1         }       }     } 接受值的组件： expor
vue之平行组件传值
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-21 1605
 步骤如下：   1、布好局，然后新建一个对象var vue1=new Vue({})，利用vue1这个新对象作为中介传值，  然后用  vue1.$emit("isa",this.aaa)  即把this.aaa赋给isa methods:{ tapa(){ vue1....
Vue Styled Components 新版本发布
As的博客
08-22 458
Feature ### 自动添加前缀(Auto Prefixing) vue-styled-components 会在编译 CSS 时自动添加浏览器私有前缀，这可以确保你的 CSS 规则在最常见的浏览器中兼容。
移动端签名
最新发布
notagoodwriter的博客
08-23 365
【代码】移动端签名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值