vue同胞组件通讯解决方案（以下为一种另外可用vuex解决）
2024-08-28 13:28:45
<!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>
最新文章
- 用ffmpeg合并音频文件
- util类中非静态方法中注入serivce，在controller层是使用util。
- PHP 创建缩略图
- BZOJ 2002 && BZOJ 2409 LCT && BZOJ 3282 初步练习
- 神经网络（python源代码）
- Flex Builder读书笔记（二）——MXML
- Elasticsearch refresh vs. flush【转载】
- c++流的读写
- Oracle基础 exp/imp 数据泵导入/导出 命令
- MyBatis学习 之 四、MyBatis配置文件
- (转)实战Memcached缓存系统（5）Memcached的CAS程序实例
- css控制内容显示，自动加"..."
- Blade和其他构建工具有什么不同
- java各种排序实现
- 移动端车牌识别——可以嵌入智能手机系统里的新OCR识别技术
- Bootstrap选项卡
- 调用start()方法和直接调用run()方法的区别
- EasyUIDataGrid去掉垂直滚动条
- 系统调用syscall---用户态切换到内核态的唯一途径
- Javascript - Jquery - 事件