Vue(四）——全局事件总线，消息订阅与发布，nextTick

最新推荐文章于 2025-01-24 18:10:09 发布

糖^O^

最新推荐文章于 2025-01-24 18:10:09 发布

阅读量2.3w

点赞数 58

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_61016904/article/details/126840722

版权

本文详细介绍了Vue中组件间的通信方式，包括全局事件总线和消息订阅发布机制，以及`$nextTick`的使用。同时，还探讨了Vue封装的过渡与动画效果，展示了如何利用`<transition>`和`<transition-group>`实现元素的动态过渡。

摘要由CSDN通过智能技术生成

💻 博主主页： 👉🏻 👉🏻 👉🏻 糖－O－

🚩🚩🚩vue专栏：Vue全家桶

🌞🌞🌞 上一篇： Vue(三)——脚手架，自定义事件，插槽

👍👍👍 希望各位博主多多支持！！！🌹 🌹 🌹

2.4. 全局事件总线

一种组件间通信的方式，适用于任意组件间通信。

安装全局事件总线：

new Vue({
     
	......
	beforeCreate() {
     
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
})

使用事件总线：

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
     
  demo(data){
     ......}
}
......
mounted() {
     
  this.$bus.$on('xxxx',this.demo)
}

提供数据：this.$bus.$emit('xxxx',数据)
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

School.vue

<template>
	<div class="school">
		<h2>学校名称：{
  {name}}</h2>
		<h2>学校地址：{
  {address}}</h2>
	</div>
</template>

<script>
	export default {
     
		name:'School',
		data() {
     
			return {
     
				name:'尚硅谷',
				address:'北京',
			}
		},
        methods: {
     
            demo(data) {
     
                console.log('我是School组件，收到了数据',data)
            }
        }
		mounted() {
     
			// console.log('School',this)
			this.$bus.$on('hello',this.demo)
		},
		beforeDestroy