个人网站用备案吗,怎么看网站开发的好坏,网页如何保存密码,沂源县建设局网站目录
一.性质
1.轻量级
2.单例
3.异步
4.事件绑定与解绑
二.作用
1.组件间通信
2.解耦
3.状态管理
4.事件的集中处理
三.使用
1.安装mitt
2.引入mitt#xff1b;调用mitt#xff1b;暴露mitt
3.组件1
4.组件2
四.代码
1.组件1
2.组件2
五.效果 一.性质
1…目录
一.性质
1.轻量级
2.单例
3.异步
4.事件绑定与解绑
二.作用
1.组件间通信
2.解耦
3.状态管理
4.事件的集中处理
三.使用
1.安装mitt
2.引入mitt调用mitt暴露mitt
3.组件1
4.组件2
四.代码
1.组件1
2.组件2
五.效果 一.性质
1.轻量级
mitt是一个非常轻量级的库其主要目标是提供一个简单、高效、易于使用的事件总线。
2.单例
mitt通常被实例化为一个全局对象这样可以确保在整个应用中只有一个实例便于组件间共享。
3.异步
mitt支持异步事件处理这意味着你可以注册事件处理器当事件触发时处理器可以异步执行。
4.事件绑定与解绑
允许组件注册事件处理器并随时解绑它们以控制事件处理的生命周期。 二.作用
1.组件间通信
在Vue中组件间通信通常通过props和事件实现。然而当组件间的通信关系复杂或者需要在多个组件间共享状态时使用事件总线可以提供更灵活的解决方案。
2.解耦
通过事件总线组件可以被解耦即组件不需要直接引用其他组件而是通过事件总线来传递信息这有助于提高组件的复用性和可维护性。
3.状态管理
在大型应用中事件总线可以作为状态管理的工具帮助管理全局状态尤其是当应用使用了如Vuex这样的状态管理库时事件总线可以作为其补充处理特定的事件流。
4.事件的集中处理
在某些场景下可能需要对多个组件的事件进行集中处理比如更新全局状态、触发全局操作等事件总线提供了一个集中处理这些事件的中心点。 三.使用
1.安装mitt
控制台输入npm i mitt 2.引入mitt调用mitt暴露mitt 3.组件1
1.创建一个Vue组件显示子组件1的标题、游戏机名称和收到的信息。
2.使用响应式变量game和toy来存储游戏机名称和接收到的信息。
3.通过监听send-toy事件来接收外部发送的信息并将接收到的信息更新到toy变量中从而在界面上显示出来。 4.组件2
响应式变量toy存储玩具名称并使用自定义的emitter进行事件的触发和传递。 四.代码
1.组件1
templatediv classfatherh4子组件1/h4h4游戏机{{ game }}/h4h4收到的信息:{{ toy }}/h4/div
/templatescript setup langts namefatherimport { ref } from vue;import emitter from /utils/emitter;let game ref(ps5)let toy ref()// 绑定事件emitter.on(send-toy,(value:any){console.log(send-toy事件被触发,value)toy.value value})
/scriptstyle
.father{background-color: skyblue;
}
h4{margin-left: 20px;font-size: 20px;
}
button{width: 120px;height: 40px;font-size: 20px;margin-left: 20px;
}/style2.组件2
templatediv classsonh4子组件2/h4h4玩具{{ toy }}/h4button clickemitter.emit(send-toy,toy)玩具/button/div
/templatescript setup langts namesonimport { ref } from vue;import emitter from /utils/emitter;let toy ref(变形金刚)/scriptstyle
.son{background-color: skyblue;
}h4{margin-left: 20px;font-size: 20px;
}
button{width: 120px;height: 40px;font-size: 20px;margin-left: 20px;
}/style五.效果
