全局事件总线和vuex,vue3中事件总线

　　这篇文章主要为大家详细介绍了某视频剪辑软件全局事件总线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

　　全局事件总线，是组件间的一种通信方式，适用于任何组件间通信。

　　看下面具体的例子。

　　父组件：App

　　模板

　　div class="应用程序"

　　公司/

　　员工/

　　/div

　　/模板

　　脚本

　　从导入公司10.5/组件/公司。vue ；

　　从导入员工10 . 1/组件/员工。vue ；

　　导出默认值{

　　组件：{

　　公司，

　　雇员

　　}

　　}

　　/脚本

　　风格。app{

　　背景：灰色；

　　填充：5px

　　}。btn{

　　左边距：10px

　　行高：30px

　　背景：象牙；

　　边框半径：5px

　　}

　　/风格

　　子组件：Company和Employee

　　模板

　　公司

　　氘公司名称：{{name}}/h2

　　氘公司地址：{{address}}/h2

　　button @click=sendMessage 点我发送/按钮

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：公司，

　　data(){

　　返回{

　　名称：五哈技术有限公司，

　　地址：上海宝山

　　}

　　},

　　方法：{

　　sendMessage(){

　　console.log(公司组件发送数据：，这个。姓名)；

　　这个。$巴士. emit(demo ，这个。姓名)；

　　}

　　}

　　}

　　/脚本

　　样式范围。公司{

　　背景：橙色；

　　背景剪辑：内容框；

　　填充：10px

　　}

　　/风格

　　模板

　　div class="雇员"

　　氘员工姓名：{{name}}/h2

　　氘员工年龄：{{age}}/h2

　　/div

　　/模板

　　脚本

　　导出默认值{

　　姓名：员工，

　　data(){

　　返回{

　　名称：张三，

　　年龄：25岁

　　}

　　},

　　已安装(){

　　这个。$巴士在(上的.演示,(数据)={

　　console.log(员工组件监听演示，接收数据：,数据);

　　})

　　},

　　销毁前(){

　　这个。$巴士$off(演示);

　　}

　　}

　　/脚本

　　样式范围。员工{

　　背景：天蓝色；

　　背景剪辑：内容框；

　　填充：10px

　　}

　　/风格

　　入口文件：main.js

　　从“Vue”导入Vue

　　从导入应用程序. 1/app。vue ；

　　vue。配置。生产提示=假；

　　新Vue({

　　埃尔： #app ，

　　render: h=h(App)，

　　创建之前(){

　　Vue.prototype. $ bus=this

　　}

　　})

　　父组件App，子组件公司和雇员

　　子组件公司和雇员之间通过全局数据总线进行数据传递。

　　在主页。射流研究…中，定义了全局事件总线：$bus。

　　$总线定义在Vue。原型，因此$总线对所有组件可见，即所有组件可通过这个。$总线访问。

　　$总线被赋值为这个，即伏特计实例，因此$总线拥有伏特计实例上的所有属性和方法，如$emit 、$on 、$off等。

　　新Vue({

　　创建之前(){

　　Vue.prototype. $ bus=this

　　}

　　})

　　使用全局事件总线

　　$巴士2007年12月25日，监听事件员工。组件中定义了监听事件，监听演示事件；

　　$巴士. emit，触发事件公司。组件中定义了触发事件，点击按钮执行发送消息回调，该回调将触发演示事件。

总结

　　本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。