前端Vue2-Day56

消息订阅与发布pubsub：实现任意组件间通信

使用步骤：

① 安装pubsub-js：npm i pubsub-js

② 引入：import pubsub from 'pubsub-js'

③ 订阅消息：使用pubsub自带的subscribe方法

methods: {
　// subscribe的回调函数参数默认为消息名和数据！
  demo(msgName，data) {
    ...
  }
}
mounted() {
  this.pubId = pubsub.subscribe("消息名", this.demo)
},

④ 提供数据： pubsub.publish('消息名'，数据)

⑤ 最好在beforeDestroy中进行消息订阅的取消：利用消息订阅时产生的pubId进行取消！pubsub.unsubscribe(this.pubId)

注意：由于消息订阅的回调函数参数为消息名和数据。则一般将消息名写为_代表占位。

 

$nextTick：用于在下次DOM更新循环结束之后执行延迟回调。在修改数据后立即调用该方法，获取更新后的DOM。

使用：this.$nextTick(回调函数)

作用：在下一次DOM更新完成后执行其指定的回调。

使用时机：当改变数据后，要基于更新后的新DOM进行某些操作时，要在$nextTick所指定的回调函数中运行。

 

过渡与动画：插入、更新、移除DOM元素时，在合适的时候给元素添加样式类名。

写法：若使用动画则可直接用v-enter-active和v-leave-active调用动画，若使用过渡则用v-enter、v-enter-to、v-leave、v-leave-to分别定义。

 

① 准备样式：

元素进入样式：

• 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-group>进行包裹，且内置元素需要设置key值。