VUE 兄弟通信（除了父子就是兄弟）

最新推荐文章于 2022-11-10 09:24:57 发布
最新推荐文章于 2022-11-10 09:24:57 发布
阅读量280 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Le_OOP/article/details/81745692
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟组件通信</title>
</head>
<body>
<div  id="app">
    <brother></brother>
    <hr>
    <sbrother></sbrother>
</div>
<template  id="brother">
    <div>
        哥哥
         {{msg}}
        <button @click="gchan">哥哥</button>
    </div>
</template>
<template  id="sbrother">
    <div>
        弟弟
        {{msg}}
    {{change()}}
    </div>
</template>
<script src="vue.js"></script>
<script>
    let  bus=new Vue();
    Vue.component("brother",{
        template:"#brother",
        data(){
            return {
                msg:"我是你哥哥"
            }
        },
        methods:{
            gchan(){
                bus.$emit("suibian",this.msg)
            }
        }
    });
    Vue.component("sbrother",{
        template:"#sbrother",
        data(){
            return {
                msg:"我是你弟弟"
            }
        },
        created(){
        },
        mounted(){
            bus.$on("suibian",(val)=>{
                this.msg=val;
            })
        },
        methods:{
            change(){
            }
        }
    })
    new Vue({
    }).$mount("#app")
</script>
</body>
</html>
Le_OOP
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue兄弟组件之间的通信：
YY的博客
11-25 3454
Vue兄弟组件之间的通信：
VUE 父子组件、兄弟组件 之间通信 最强详解
不想成为可以改变世界的程序员，不是一个好程序员
05-31 7511
简单 总结： 1.1 通过 ref 调用/获取 子组件内参数/方法 实现：就是在 你想要访问的组件上 通过 ref 注册引用信息，然后依靠 this.$refs 调用 组件内的方法以及参数。 2.1 通过emit 调用 父组件方法 实现：将 要在子组件中想调用的父组件方法，通过【@】配置至组件上，然后通过this.$emit()来调用。 2.2 通过 props 调用 父组件方法/参数 实现：将 要在子组件中想调用的父组件方法/父组件参数，通过 【:】配置至组件上，接着在子组件的prop .....
vue组件间通信六种方式（总结篇）
sinat_40572875的博客
11-10 1442
而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 浪里行舟。接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
vue2.0路由及兄弟组件通信
shunchenggong的博客
09-16 3081
最近在学习用vue2.0进行项目的开发，由于接手项目的时候，项目的完整架构已经搭建完毕，为了不破坏之前的项目，我就采用了比较古老的写法，说实话不采用es6的语法去写，有好多事情都变得比较麻烦了，不过原理还是一样的，之前有写过父与子 和子与父之间的通信，这次主要说的是兄弟组件的通信及vue路由的使用。 项目实景如下 ： 按照路由—-组件通信 —— 路由切换时的数据加载 方式来进行剖析
Vue 兄弟组件之间的通信
热门推荐
coffee豆丿
10-08 4万+
使用Vue构建组件容易，但对于初学者要掌握Vue组件中的通讯还是有一定的难度。比如说，父组件如何向子组件通讯？子组件又是如何向父组件通讯？兄弟组件又是怎么通讯？这些方面都是有关于组件通讯相关的知识。而且掌握Vue组件之间的通讯方式还是掌握Vue组件的另一种能力。 在Vue中，Vue的组件自身就很棒，因为它可以帮助我们使用重用的代码片段，我们也可以使用Vue提供的所有功能。现在我们要掌握怎么建立组...
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
10-15
主要介绍了vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 兄弟组件通信的方法（不使用Vuex）
08-29
本文主要介绍了Vue 兄弟组件通信的方法，主要思想是使用自定义事件实现父子组件之间的通信。下面详细介绍该方法。 首先，在子组件中，我们可以使用 `$emit` 方法触发一个自定义事件，并传递参数。例如，在 `a.vue` ...
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
10-17
主要介绍了vue实现父子组件之间的通信以及兄弟组件的通信功能,结合实例形式分析了vue.js组件间通信相关操作技巧,需要的朋友可以参考下
vue实现的组件兄弟间通信功能示例
10-17
Vue提供了多种方式来实现组件间的通信，包括父子组件通信、孙子组件通信以及兄弟组件通信。本篇文章主要探讨的是Vue中兄弟组件间通信的实现方法。 首先，我们要明白在Vue中，组件之间默认是不能直接访问彼此的状态...
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式 在 Vue 中，$emit 与 $on 是两个非常重要的函数，它们用于实现组件之间的数据传输。下面，我们将详细介绍 Vue 中的 $emit 与 $on 父子组件与兄弟组件之间...
Vue入门-兄弟组件之间的通信
从零出发
06-21 2261
兄弟组件通信的逻辑实现注意: 借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发.第一步: 在child1子组件中,给button按钮绑定一个点击事件toChild2, 在事件中我们通过公共的vue对象totalVm.$emit()方法去触发一个定义事件event1,并传递我们的参数str.第二步: 在child2组件创建的钩子(created())中监听事件event...
vue 解决兄弟组件、跨组件深层次的通信问题
starleejay的博客
11-02 9589
兄弟组件之间的通信同样是在项目中经常会遇到的组件间的通信问题之一, 这种问题的最根本方法就是： 把兄弟组件内部的变量提升到一个中央仓库。 借助父级组件链式交互 使子组件1 通过 $emit 通知父级, 父级再通过响应 子组件1 的事件去触发子组件2的事件，这样的链式操作，在子组件不多的时候，但是一个不错的解决方法 子组件1 &lt;template&gt; &lt;div&gt; &l...
vue.js之路(4)——vue2.0s中eventBus实现兄弟组件通信
YuuyaRin的博客
01-16 3万+
在vue1.0中，组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现。然而在vue2.0中，已经废除了这种用法。 vuex加入后，对组件之间的通信有了更加清晰的操作，对于中大型的项目来说，一开始就把vuex的使用计划在内是明智的选择。 然而在一些小型的项目，或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispa
Vue---兄弟组件通信（三种方式） vue bus
web修理工
07-15 1万+
第一种：eventBus 新建一个js文件， 我这里叫做 bus.js； 文件内容： import Vue from 'vue'; export default new Vue(); 然后在你需要触发的 组件中引入 import bus from ‘文件路径’ 执行：bus.$emit('触发名称', 传输的数据 ) 最后在你需要的通信的另一个组件中 mounted生命周期钩子中执行如下： bus.$on('触发名称', res => { /
兄弟组件通信
LiuBo_1999的博客
05-20 181
$emit/ $on 这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案 vuex。 1.具体实现方式： var Event=new Vue(); Event.emit(事件名,数据);Event.emit(事件名,数据); Event.emit(事件名,数据);Event.on(事件名,data => {}); **假设兄弟组件有三个，分别是
Vue 兄弟组件通信（不使用Vuex）
飞鸿的博客
09-20 2258
方法一、建立bus中间机制，兄弟组件$emit 和$on进行通信 方法二、子传父，然后父传子。 其实两种方法原理相似。   我采用了方法二。 a组件中触发父组件b的isRepotags事件传递res.data[0].repotags       父组件b中分别为两个子组件中添加通信标识   在a组件中绑定isRepotags事件，向c组件repo传值   ...
Vue兄弟组件之间通信 eventBus
大家好，我是 ed.
08-12 926
Vue兄弟组件之间通信 eventBus 今天碰到了这个问题，两个毫无关联的组件之间需要通信，怎么办！使用 props 一层一层的传肯定是有问题的，当然可以实现，在一个就是Vuex，定义一个公共变量也是可以的，但是相对来说比较好的实现方式就是 eventBus 了吧。 其实我觉得我现在的状态就特别好，有个志同道合的人，无论在生活还是工作上遇到问题都可以敞开了探讨，没有避讳，不管最后能不能解决，都是一种收获！ 使用 一、使用 eventBus 首先我们创建一个 bus.js 文件，里面的内容如下： i
Vue兄弟组件间通信
Tochanges的博客
03-04 492
Vue兄弟组件间的通信分为两种：一种是相邻兄弟组件(有相同的父组件)的通信；另一种是相隔多级(有共同的祖先及组件)的兄弟组件通信。 第一种兄弟通信，相当于父子组件通信和子父组件通信的结合(之前介绍过)，举一个简单例子：组件1和组件2是兄弟，组件2的按钮可以控制组件1中div的显示隐藏。 代码如下： <!DOCTYPE html> <html lang="en"> <h...
兄弟组件之间通信
yong_jin的博客
08-02 235
inject 兄弟组件之间通信 场景：building组件去改变nav组件的count值 路由 { path:'project/Home', name:'project_home', component:()=>import('../views/project/Home.vue'), //项目级地址 children:[ { path:'/project/Home/building',
vue中父子组件，兄弟组件的通信
最新发布
05-04
在Vue中，父子组件、兄弟组件之间的通信可以通过以下方式： 1. 父组件向子组件传递数据： 在父组件中使用`props`来向子组件传递数据，子组件中通过`props`接收数据。 2. 子组件向父组件传递数据： 在子组件中使用`$emit`来触发自定义事件，父组件中通过`v-on`监听子组件触发的事件，从而接收子组件传递的数据。 3. 兄弟组件之间传递数据： 在Vue中，兄弟组件之间的通信需要借助父组件。父组件中通过`props`向两个子组件传递数据，一个子组件修改数据后，通过`$emit`触发自定义事件通知父组件，父组件再将修改后的数据传递给另一个子组件。 4. 使用Vuex实现全局状态管理： 如果组件之间的通信比较复杂，可以使用Vuex进行全局状态管理。通过Vuex，所有组件都可以访问到相同的状态，从而实现组件之间的通信。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值