vue中兄弟之间组件通信
我们知道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中兄弟之间组件通信的更多相关文章
- vue中v-model父子组件通信
有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.是怎么实现的呢? 实际上v-model 只是语法糖而已. <input v-model="inpu ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中的父子组件相互调用
vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
- Vue中iframe和组件的通信
最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue ...
- vue中8种组件通信方式, 值得收藏!
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
- vue学习记录⑤(组件通信-父与子)
今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...
- 关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法
一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成 这就需要父子组件之间的通信,代码如下: 1. 建立一个用于父子组 ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
随机推荐
- C#观察者模式的应用与思考
1:项目场景 在设计数据表的时候有时候为了将来统计或查询的方便,我们会冗余一些字段.如有三张数据表,学校信息表.班级动态表.班级信息表. 班级动态由学校老师所发,可以进行评论点赞等操作,为了提升这种非 ...
- Code Signal_练习题_matrixElementsSum
After they became famous, the CodeBots all decided to move to a new building and live together. The ...
- python学习之老男孩python全栈第九期_day016知识点总结
'''数据类型:intbool... 数据结构:dict (python独有的)listtuple (pytho独有的)setstr''' # reverse() 反转l = [1,2,3,4,5]l ...
- BZOJ4566: [Haoi2016]找相同字符(后缀自动机)
题意 题目链接 Sol 直接在SAM上乱搞 枚举前缀,用SAM统计可以匹配的后缀,具体在匹配的时候维护和当前节点能匹配的最大值 然后再把parent树上的点的贡献也统计上,这部分可以爆跳parent树 ...
- [AngularJS] “路由”的定义概念、使用详解——AngularJS学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 AngularJS“路由”的定义概念 AngularJS最近真的很火,很多同事啊同学 ...
- Python 底层原理知识
1.Python是如何进行内存管理的? 答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制 一.对象的引用计数机制 Python内部使用引用计数,来保持追踪内存中的对象,所有对象都 ...
- xcrun: error: invalid active developer path (/Applications/Xcode.app/Contents/Developer)解决办法
背景 mac下卸载了xcode,使用git等命令时就提示错误.invalid active path(Applications/Xcode.app/Contents/Developer),这种情况可以 ...
- FastDFS部署安装全过程
你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:https://pushy.site/posts/153205 ...
- JVM参数简述
java虚拟机启动时会带有很多的启动参数,Java命令本身就是一个多参数的启动命令.那么具体JVM启动包含哪些参数呢?这篇文章针对java8的情况做一篇汇总解读,包含大多数常见和不常见的命令参数,过于 ...
- mac 手动卸载软件位置
系统偏爱设置 /Users/xxxxx/Library/Preferences/ xxxx 支持文件 /Users/xxxxx/Library/Application Support/xxx文件夹 数 ...