组件通信 eventtBus
2024-10-07 08:18:24
平级组件的通信 一个全局发布订阅模式,它是挂载到全局的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件通信 &bus</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<children1></children1>
<children2></children2>
</div>
</body>
<script>
//发布订阅模式
//适合简单的数据流
Vue.prototype.$bus = new Vue();
Vue.component('children1',{
template:`<div><span>children1</span></div>`,
mounted() {
this.$bus.$on('吃',(food)=>{
console.log(food)
})
},
})
Vue.component('children2',{
template:`<div><span>children2</span></div>`,
mounted() {
this.$bus.$emit('吃','月饼')
},
})
let vm = new Vue({
el:'#app',
})
//hello
</script>
</html>
最新文章
- 通过Matrix进行二维图形仿射变换
- C# double 四舍五入
- 类和对象 nil/Nil/NULL的区别
- GC 源码分析
- ZOJ 2136 Longest Ordered Subsequence
- 从php脚本到浏览器,编码方式浅析
- 理解js中的自由变量以及作用域的进阶
- [iPhone高级] 基于XMPP的IOS聊天客户端程序(IOS端一)
- SpriteFrameCache 精灵帧缓存
- Android开发之使用广播监听网络状态变化
- iOS 视图跳转
- mybatis 查询语句(按条件查询)
- PHPCMS V9表单向导调用及分页
- [USACO Jan09] 安全路径
- HTML(六)HTML iframe 使用postMessage方法进行跨文档消息传递
- table-一列细分为多列(合并单元格)
- U-Mail企业邮箱如何导入授权文件
- javascript for循环 日期 select
- 单片机成长之路(51基础篇) - 013 MCS-51单片机控制详解–T2MOD
- MySQL5.7 Dockerfile