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

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

2.5. 消息订阅与发布

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

• 安装pubsub：npm i pubsub-js
• 引入: import pubsub from 'pubsub-js'

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

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

• 提供数据：pubsub.publish('xxx',数据)
• 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

School.vue

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

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'School',
        data() {
            return {
                name:'尚硅谷',
                address:'北京',
            }
        },
        mounted() {
            // console.log('School',this)
            /* this.$bus.$on('hello',(data)=>{
                console.log('我是School组件，收到了数据',data)
            }) */
            this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
                console.log(this)
                // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
            })
        },
        beforeDestroy() {
            // this.$bus.$off('hello')
            pubsub.unsubscribe(this.pubId)
        },
    }
</script>

<style scoped>
    .school{
        background-color: skyblue;
        padding: 5px;
    }
</style>

2.6. nextTick

1. this.$nextTick(回调函数)
2. 在下一次 DOM 更新结束后执行其指定的回调。
3. 当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

this.$nextTick(function(）{
    this.$refs.inputTitle.focus()
}

2.7. Vue封装的过度与动画

1. 在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2. • 元素进入的样式：

     1. v-enter：进入的起点
     2. v-enter-active：进入过程中
     3. v-enter-to：进入的终点

   • 元素离开的样式：

     1. v-leave：离开的起点
     2. v-leave-active：离开过程中
     3. v-leave-to：离开的终点

   1. 使用<transition>包裹要过渡的元素，并配置name属性：

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

   2. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

使用第三库的具体案例（随便看看，这个不重要）
库的名称：Animate.css
安装：npm i animate.css
引入：import 'animate.css'