Vue(组件间的通讯方式和动画)_03

原创已于 2022-04-13 08:43:39 修改 · 263 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-04-11 15:42:56 首次发布

4 篇文章

订阅专栏

本文介绍了全局事件总线在Vue中的应用，包括安装、使用示例，以及消息订阅与发布的方法。同时探讨了Vue的过渡和动画如何控制元素显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局事件总线是一种组件间通信的方式，适用于任意组件间通信。要想使用，首先我们进行安装.。

安装全局事件总线：

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去解绑当前组件所用到的事件。

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

使用步骤：

1.安装pubsub：npm i pubsub-js

2.引入: import pubsub from 'pubsub-js'

3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

4.提供数据：pubsub.publish('xxx',数据)

5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

Vue封装的过度和动画在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

写法：

元素进入的样式：

1.v-enter：进入的起点

2.v-enter-active：进入过程中

3.v-enter-to：进入的终点

元素离开的样式：

1.v-leave：离开的起点

2.v-leave-active：离开过程中

3.v-leave-to：离开的终点

使用<transition>包裹要过度的元素，并配置name属性

<transition name="hello">
	<h1 v-show="isShow">你好啊！</h1>
</transition>