VUE：兄弟组件间传参

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

1、定义一个中间 eventBus.js ，只有 2 行代码，用于传参：

// 此页面是vue 巴士，用于兄弟组件间通信
import Vue from 'vue'
export default new Vue()

2. 在要传参和接收参数的各个兄弟组件中引入这个 js :

// 巴士：用于兄弟组件间传值
import bus from "../../../../../static/base/eventBus.js";

3. 参数传出：

// 传参到兄弟组件：queryBtn。queryParamMap是参数，可以传多个参数，用逗号分隔
// bus.$emit("监听的事件名", 参数);bus.$emit("queryParam", queryParamMap);

4. 接收：( 可同时多个兄弟组件接收。 )

 bus.$on("queryParam", queryParamMap => {...}

这样就可以了。

VUE：兄弟组件间传参相关推荐

React兄弟组件间传参
React兄弟组件间传参效果父组件子组件1 子组件2 描述: 完整代码效果点击子组件1的按钮然后将子组件1的name值传递给子组件2并在页面展示: 父组件子组件1 子组件2 描述: 兄弟组 ...
Vue3父子组件间传参通信
Vue3 父子组件间通信前言一.父传子 defineProps 二.子传父 defineEmits 三.子组件暴露属性给父组件 defineExpose 四.依赖注入Provide / Injec ...
Vue 路由组件通讯传参的 8 种方式
当 props 是一个对象时,它将原样设置为组件 props.当 props 是静态的时候很有用. 我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过 ...
vue兄弟组件间的通信（事件总线）
一.场景描述导航栏与地图展示区为两个兄弟组件,导航栏组件用到的所有数据都来源于地图区组件通过导航栏按钮切换,控制地图区域数据的变化二.实现步骤 1. 首先两个组件中都引入全局事件总线 import ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
前端学习（2659）：组件间传参
第一步第二步第三步子组件定义第四步
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
Vue实现兄弟组件间的方法调用及回调
Vue实现兄弟组件间的方法调用及回调看兄弟间数据传递的看我写的这篇文章:vue实现兄弟组件间的实时通信先说说我遇到的情况: 点击左侧树tree,需要调用右侧houseInfo组件中的新增方法,弹出 ...

VUE：兄弟组件间传参

VUE：兄弟组件间传参相关推荐

最新文章

热门文章