我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决

当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢

参考链接:https://my.oschina.net/u/3229305/blog/1820279

//在生成vue实例前,给Vue的原型上添加一个bus属性,这个属性是vue的实例,
//之后创建的vue实例都具有bus这个属性
//首先在main.js
Vue.prototype.bus = new Vue(); //组件hello <template>
<div class="container">
<button @click="handler">hello word</button>
<word></word>
</div>
</template>
<script>
import word from './word.vue'
export default{
methods:{
handler () {
this.$bus.$emit('shareText', 'hello word')
}
}
}
</script> // 组件world
<template>
<div class="con">
{{text}}
</div>
</template>
<script>
export default {
data () {
return {
text: 'hello'
}
},
mounted () {
var that = this
this.$bus.$on('shareText', function (text) {
that.text = text
})
} }
</script>

vue中兄弟之间组件通信的更多相关文章

  1. vue中v-model父子组件通信

    有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.是怎么实现的呢? 实际上v-model 只是语法糖而已. <input v-model="inpu ...

  2. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  3. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  4. vue中兄弟组件间通讯

    vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...

  5. Vue中iframe和组件的通信

    最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue ...

  6. vue中8种组件通信方式, 值得收藏!

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...

  7. vue学习记录⑤(组件通信-父与子)

    今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...

  8. 关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法

    一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成 这就需要父子组件之间的通信,代码如下: 1. 建立一个用于父子组 ...

  9. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

随机推荐

  1. js-权威指南学习笔记15.2

    1.读取Element的innerHTML属性作为字符串标记返回那个元素的内容. 2.当设置元素的outerHTML时,元素本身被新的内容所替换.只有Element节点定义了outerHTML属性,D ...

  2. SpringMVC作用、SpringMVC核心组件、创建项目流程

    SpringMVC框架 1. 作用 解决了V-C的交互问题,即视图与控制器的交互问题. 在原生的Java EE技术中,使用Servlet作为项目中的控制器,用于接收用户的请求,并给予响应结果.这种做法 ...

  3. BS网站架构演变

    BS网站架构演变 网站架构的整个演变过程主要是围绕大数据和高并发这两个问题展开的,解决的方案主要分为使用缓存和使用多资源两种类型.多资源主要指多存储(包括多内存).多CPU和多网络,对于多资源来说又可 ...

  4. leading--Oracle hint

    SQL>  explain plan for select rowid rid from  2   scott.emp e where e.empno >100 and e.empno & ...

  5. Python redis交互

    1.首先安装模块 pip3 install redis 2.代码模板如下: from redis import StrictRedis if __name__ == '__main__': # 设置连 ...

  6. OpenStreetMap、googleMap等经纬度和行列号之间相互转化(python,JavaScript,php,Java,C#等)

    python: # OpenStreetMap经纬度转行列号 def deg2num(lat_deg, lon_deg, zoom): lat_rad = math.radians(lat_deg) ...

  7. vo、po、dto、bo、pojo、entity、mode如何区分

    https://blog.csdn.net/qq_41604862/article/details/79675223?utm_source=blogxgwz0

  8. .net下log4net的使用

    这里以控制台应用程序为例 首先是要添加引用: 安装后可以看到项目中多了log4net的引用: 添加应用程序配置文件app.config,配置log4net <?xml version=" ...

  9. 如何通过rman的增量备份恢复dataguard中standby端的数据

    很多正在使用dataguard的客户,都会遇到一个棘手的问题: 在备份端与主库同步的过程中由于网络原因或磁盘问题导致一个或多个归档日志丢失,进而dataguard同步无法继续.很多客户都选择了重新全库 ...

  10. 辉光UIView的category

    辉光UIView的category 本人视频教程系类   iOS中CALayer的使用 效果如下: 源码: UIView+GlowView.h 与 UIView+GlowView.m // // UI ...