vue组件之间的传值（兄弟间的传值）

概要：vue组件之间的传值大致有三种：父传子，子传父，还有兄弟之间，今天我们主要来讲兄弟之间的传值。废话不多说，我们直奔主题

vue 组件兄弟间的传值是要通过一个事件总线来实现（可以把事件总线理解为一个全局变量），他是做完一个兄弟之间的桥梁，总线的名称是可以随便来起的，但通常有几个固定的名字是人们看到都认识能识别到的，如下图：

这是两行模板一样的代码，第一行应用vue,第二行创建一个对象，事件总线就创建好了。
注：事件总线是js文件

接下来我们就可以直接用这个事件总线来搭起兄弟间的桥梁了，下面是个小例子，已与助大家理解：

这是一个主页面，左边是一个目录菜单，当点击左边组件（Left）目录内容时，给右边的组件传值(Right")，让其内容随着目录选择改而改变，这个怎么实现呢，如下：

引入我们的事件总线，然后给每个导航点击按钮使用emit实现一个传值的效果，点击menu1，我们就传值1，就是将1我们赋给了′val′，然后通过emit 实现一个传值的效果，点击 menu1，我们就传值1，就是将 1 我们赋给了'val'，然后通过emit实现一个传值的效果，点击menu1，我们就传值1，就是将1我们赋给了′val′，然后通过emit触发到on事件里，on事件写在哪呢，写在右边的组件里，如下：

在这里我们同样引入事件总线，然后就可以用on事件把前边传的值接收过来，然后赋给我们所需要的，如上赋值给kk，这样当我们点击 menu1 的时候，右边就可以变成我们想要的相对应的组件，我们的传值就成功了。

是不是很简单呢，如果对你有帮助，就请为我点赞吧~。

vue组件之间的传值（兄弟间的传值）相关推荐

vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
vue组件之间互相传值：父传子，子传父
vue组件之间互相传值:父传子,子传父为什么要用到组件间传值? 答:组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面 ...
Vue 组件之间的传值方式有哪些？
Vue 组件之间的传值方式有哪些? 在平常写Vue项目时,组件传值必不可少,今天我们就要总结一下有哪些种方式呢? 1.父组件向子组件传值(用props) 子组件 <template>< ...
vue组件之间的传值的几种方法
vue组件之间传值的几种方法总结一.父传子父传子技术就是把父组件中的数据传给子元素调用,用到的方法是 1.在父组件的子组件标签上绑定一个属性,挂载要传输的变量 ,语法是 :属性名 (冒号加属性名) ...
深入理解Vue 组件之间传值
一.父组件向子组件传递数据在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组 ...
vue组件之间传值方式方法---实战面试篇
vue组件之间传值方式方法 vue组件传值 vue组件化什么是组件化? vue组件通讯父组件向子组件传值子组件向父组件传值兄弟组件传值总结 vue组件传值最近准备面试跳槽.说到前端面试,有 ...
Vue组件之间传值的几种方法 (直接上代码)
vue组件之间传值的几种方法总结一. props(父传子) 父组件传递 <template><div><HelloWorld :msg="msg" ...
vue组件之间通信（传值）---8种方式
Vue组件之间的通信方式(个人理解) props(父传子) //父组件 parent.vue<template>//子组件<child-com :num="num" ...
vue组件之间的传参总结
之前写的Vue 子父组件间的传值_WeiflR10的博客-CSDN博客一.父传子(prop) 第一步:在父组件中定义数据,例:tohome data () {return {tohome:" ...

vue组件之间的传值（兄弟间的传值）

vue组件之间的传值（兄弟间的传值）相关推荐

最新文章

热门文章