vue同胞组件通讯解决方案（以下为一种另外可用vuex解决）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue2.2.js"></script>
</head>
<body>
<div id="app">
<aa></aa>
<hr />
<bb></bb>
</div>
<script type="text/javascript">
// 注册一个空的 Vue 实例，作为 ‘中转站’
var eventBus = new Vue();
//A组件
Vue.component("aa", {
template: "<button @click='addBar'>点击</button>",
data: function() {
return { }
},
methods: {
addBar: function() {
//让B组件执行监听事件
eventBus.$emit('doCount')
}
}
});
//B组件
Vue.component("bb", {
template: "<div>{{count}}</div>",
data: function() {
return {
count: 0
}
},
//在组件创建的钩子函数中监听事件
mounted: function() {
var _this = this;
eventBus.$on("doCount", function() {
_this.count ++;//+=1
});
}
});
new Vue({
el: "#app"
});
</script>
</body>
</html>
vue同胞组件通讯解决方案（以下为一种另外可用vuex解决）的更多相关文章
- vue组件通讯方法汇总（在不使用vuex的情况下）
前三种是父子组件通讯,最后一种是平级组件.
- seventBus（封装） 一个巧妙的解决vue同级组件通讯的思路
如果在你项目中需要多处用到同级组件通讯,而又不想去写繁琐的vuex,可以参考这个小思路.本人在写项目中琢磨出来的,感觉挺好用,分享一下. 1.在utils文件夹下添加BusEvent.js 注释已经很 ...
- vue的组件通讯
Vue的组件通讯又称组件传值 一.父子组件传值: 父组件: <子组件名 :动态变量名 (随便起)='你想要传递的数据' ></子组件名> 子组件: 利用 prop去接收父组 ...
- vue 组件通讯方式到底有多少种 ?
前置 做大小 vue 项目都离不开组件通讯, 自己也收藏了很多关于 vue 组件通讯的文章. 今天自己全部试了试, 并查了文档, 在这里总结一下并全部列出, 都是简单的例子. 如有错误欢迎指正. 温馨 ...
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
- vue 父子组件传值的另外一种方式 provide inject
1.文档说明 https://cn.vuejs.org/v2/api/#provide-inject 2.实例 element ui的dropdown组件 dropdown.vue: provide( ...
- 深入理解Vue父子组件通讯的属性和事件
在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...
- Vue父子组件通讯
我们知道,父组件不能修改子组件的数据[这种说法是不严谨的],严谨的说法是:子组件内部不能修改从父组件传递过来的值.原因是vue遵循的是数据单向流原则,父组件传递数据给子组件只能单向绑定,通过Props ...
随机推荐
- HDU - 1054 Strategic Game（二分图最小点覆盖/树形dp）
d.一颗树,选最少的点覆盖所有边 s. 1.可以转成二分图的最小点覆盖来做.不过转换后要把匹配数除以2,这个待细看. 2.也可以用树形dp c.匈牙利算法(邻接表,用vector实现): /* 用ST ...
- 洛谷P2473奖励关——状压DP
题目:https://www.luogu.org/problemnew/show/P2473 还是对DP套路不熟悉... 像这种前面影响后面,而后面不影响前面的问题就应该考虑倒序递推: 看n只有15那 ...
- Table View Programming Guide for iOS---(五)---Creating and Configuring a Table View
Creating and Configuring a Table View Your app must present a table view to users before it can mana ...
- iOS UI控件
创建: 2018/04/21 完成: 2018/04/25 更新: 2018/09/24 补充UIActivityIndicatorView的显示和隐藏方法 UIButton 设定项目 项目名 ...
- （水题）洛谷 - P2089 - 烤鸡
https://www.luogu.org/problemnew/show/P2089 非常暴力的dfs,不知道不剪枝会怎么样,但是其实最多也就 $3^{10}$ ,大不到哪里去.还有一个细节就是大于 ...
- Android Studio新建类头部注释和添加函数注释模板及快捷键
一,Android Studio新建类头部注释 是不是有时候看到这个很心烦 其实Studio中有设置修改这些注释模板的信息的功能 其实很简单,只需要两步: 1.打开Setting设置面板,找到File ...
- iOS中音频的录制与播放（本地音频文件的播放）
iOS功能开发涉及到音频处理时,最常见的时进行录音,以及音频文件的播放.停止播放等的操作.在开发中还要避免同一个音频文件,或不同音频文件之间的处理,比如说正在播放A音频时,可以停止播放A音频,也可以播 ...
- hdoj5667 BestCoder Round #80 【费马小定理（膜拜）+矩阵快速幂+快速幂】
#include<cstdio> #include<string> #include<iostream> #include<vector> #inclu ...
- Codeforces Round #324 (Div. 2)C. Marina and Vasya
A的万般无奈...后来跑了大牛的这份代码发现, 题意是求一个序列与给定的两个序列有t个不同. 只要保证...对应位置就行了.. 所以处理起来非常方便.............. 可是没有感觉是对应位置 ...
- Ecliplse 指定JRE
http://blog.csdn.net/hongweigg/article/details/9987649 在Eclipse启动的过程中,它会去找系统环境变量设置的JRE_HOME或JDK_HOME ...