vue兄弟组件通信

所有需要通信的组件共用一个事件对象。new Vue(),新new一个vue对象,然后所有组件都访问这个对象,通过这个对象$emit事件,也通过这个对象$on监听事件。

实现一:直接在单文件里面实例化根Vue的时候,在data里return一个属性,值为new Vue(),例如bus: new Vue()

在具体的组件页面上,直接用this.$root.bus.$emit(‘eventName‘)发送事件。

在另一个组件页面的mounted函数里面,用this.$root.bus.$on(‘eventName‘, () => { // 一些要做的事  } )监听事件。

实现二:把共用的事件对象单独抽成一个bus.js文件,哪个组件要用到就引用进来,然后$emit或者$on。

实现三:抽成bus.js文件后,还可以作为Vue的插件。

原文地址:https://www.cnblogs.com/coconutGirl/p/9447944.html

时间: 2024-10-09 01:43:25

vue兄弟组件通信的相关文章

vue兄弟组件的传值eventbus

注:当在a.vue组件上触发点击事件时,就会触发bus上监听的事件,而bus事件监听在b.vue里面,这个时候就会触发b.vue 上的事件监听,而通过回调函数,就可以拿到a.vue组件传过来的数据,从而实现兄弟组件通信. ###~~bus.js import Vue from "vue" export default new Vue()parent.vue父组件 <template> <div id="app"> <avue>&l

vue 兄弟组件相互通信

兄弟组件之间相互传递数据 首先创建一个vue的空白实例(兄弟间的桥梁) 两个兄弟之间建立一个js文件 import Vue from 'vue' export default new Vue() 子组件 childa发送方使用 $emit 自定义事件把数据带过去 <template> <div> <span>A组件->{{msg}}</span> <input type="button" value="把a组件数据传

vue2.0 父子组件通信 兄弟组件通信

父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></child> //注意这里用驼峰写法哦 </parent> data(){ return { content:'sichaoyun' }; } 子组件通过props来接受数据 第一种方法 props: ['childCom'] 第二种方法 props: { childCom: String //这里

vue2.0s中eventBus实现兄弟组件通信

在vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择. 然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说,就需要一个比较便捷的解决方法.那么,eventBus的作用就体现出来了. 主要是现实途径

兄弟组件通信及滚动逻辑

子组件(字母A/B/C) Alphabet.vue <template> <ul class="list"> <!-- <li class="item" v-for="(item,key) of cities" :key="key" @click="handleLetterClick" @touchstart="handleTouchStart" @t

vue基础----组件通信(props,$emit,$attrs,$listeners)

一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 1 <body> 2 <div id="app"> 3 <my-father :msg1="msg" a="10" :b="20" @click="fn"></my-father> 4 </div>

vue基础----组件通信($parent,$children)

1.按照dom的父子级关系,在子组件中可以通过$parent 直接调用父组件的方法,也可得到父组件的属性. 2.在父组件中通过$childrens可以得到一个子组件数组,能够在父组件中调用子组件的方法和得到属性. 3.特别注意一下_uid标识每一个组件. 下面是一个下拉菜单举例 1 <body> 2 <div id="app"> 3 <collapse> 4 <collapse-item title="大学同学">大学

vue 兄弟组件的传值

handleLetterClick方法,采用emit 传递给父组件 父组件触发的方法: handleLetterChange方法: 父组件传递给子组件: CityList组件: 兄弟组件的传值可以先将值传递给父组件,然后由父组件传递给兄弟组件 2018-06-12    19:52:08 原文地址:https://www.cnblogs.com/guangzhou11/p/9174795.html

Vue父子组件通信实践

组件(Component)是Vue.js的核心部分,组件的作用域是孤立的,所以不能在子组件模板内直接引用父组件的数据,但是组件之间的通信是必不可少的.组件A在其模板中使用了组件B,A组件要向B组件传递数据,B组件要将其内部发生的事情告知A组件,那么A.B组件怎么进行通信呢? Vue.js父子组件的关系可以总结为props down,events up,父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息,它们的工作方式如下图所示: 父组件 - 子组件:父组件传值给子组