vue bus的使用方法,vue-bus
本文主要介绍了$bus的用法以及Vue中$on和$off的指令，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
$总线使用和$on，$off使用$on，$once，$off，$emit)1 .什么是实例事件？2.使用场景3。对应$on，还有一个$once4。$off关闭实例事件。
$bus的用法及$on、$off的使用
在Vue中，$bus一般与$on和$off一起使用，一般用于任何组件之间的通信，所以今天就一起来说一下，这里给你一个案例。
首先，在main.js中配置全局总线
//介绍Vue
从“vue”导入Vue
//介绍应用程序
从导入应用程序。/App.vue
//关闭Vue的生产提示
Vue.config.productionTip=false
//创建虚拟机
新Vue({
埃尔： #app ，
render: h=h(App)，
Before(){//初始化阶段之前
Vue.prototype.$bus=this //配置全局总线，也就是总线。
}
})
将学生组件中的数据提供给另一个组件(学校组件)
模板
div class="学生"
H2学生姓名：{{name}}/h2
H2学生性别：{{sex}}/h2
Button @ click= sendStudentName 为学校组件/button提供学生姓名
/div
/模板
脚本
导出默认值{
姓名：学生，
data() {
返回{
姓名：张三，
性别：“男性”，
}
},
方法：{
sendstudenname(){//提供发送数据。
这个。$巴士。$emit(hello，this.name)
}
},
}
/脚本
使用学校组件中的事件总线接收数据。如果学校组件想要接收数据，它会将事件绑定到学校组件中的$bus，事件的回调会保留在学校组件本身中。
模板
学校
H2学校名称：{{name}}/h2
H2学校地址：{{address}}/h2
/div
/模板
脚本
导出默认值{
名称：学校，
data() {
返回{
名称：“工程学院”，
地址：重庆巴南，
}
},
已安装(){
这个。$巴士。$ on (hello ，(data)={//绑定当前事件(这里以hello为例)
Console.log(我是学校组件，收到数据，数据)
})
},
BeforeDestroy(){ //结束操作，销毁
这个。$巴士。$off(hello) //$off用于解除当前组件绑定的事件
}
}
/脚本
在这里。再给一个App组件，可以试试这个案例。
模板
div class=" app "
学校/
学生/
/div
/模板
脚本
从导入学生。/组件/学生
从导入学校。/组件/学校
导出默认值{
名称：“应用程序”，
组件：{学校，学生}，
}
/脚本
vue实例事件总结($on,$once,$off,$emit)
1.什么是实例事件？
事件是从构造函数外部对构造函数内部数据的调用。
2.使用场景
比如构造函数已经有了一个加法的方法，但是现在领导说需要一个减法的方法，我不想移动构造函数中的信息，可以用实例事件。操作如下所示：
3.与$on对应的还有一个$once
上面的代码只修改了一个单词$一次。
app。$once(reduce ，function(){
Console.log(“减法触发的方法”)；
这个. num -
})
结果：减法只执行一次。
4.$off关闭实例事件
当reduce关闭时，它将变得无效。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。