vue入门学习知识要点总结（七），Vue在脚手架的使用，组件自定义事件、全局事件总线、消息订阅与发布、nextTick

接上一篇文章继续总结Vue的入门知识，这里主要是关于在脚手架中的使用和理解组件的自定义事件、全局事件总线、消息订阅与发布、nextTick

Vue在脚手架中的使用

组件的自定义事件

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3. 绑定自定义事件(父组件中有test方法)：

   1. 第一种props方式，在父组件中：<Demo @hello="test"/>或 <Demo v-on:hello="test"/>

      (test的方法函数在父组件中)

   2. 第二种ref方式，在父组件中：

      <Demo ref="demo"/>
      ......
      mounted(){
         this.$refs.demo.$on('hello',this.test)
      }
      

   3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

4. props方式的触发自定义事件：在子组件中使用props接收test，然后在自身的函数方法中调用。stuTest(){test()}

5. ref方式触发自定义事件：在子组件的相应函数方法内触发this.$emit('hello',数据)

   methods: {
       sendStudentlName(){
           //触发Student组件实例身上的hello事件
   		this.$emit('hello',this.name,666,888,900)
       }
   }		
   

6. 解绑自定义事件

   //在触发自定义事件的组件中
   this.$off('hello') //解绑一个自定义事件
   this.$off(['hello','hi']) //解绑多个自定义事件
   this.$off() //解绑所有的自定义事件
   

7. 组件上也可以绑定原生DOM事件，需要使用native修饰符。<Student @click.native="show"/>

8. 销毁了当前组件的实例

   methods:{
       death(){
   		this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
   	}
   }
   

9. 注意：通过this.$refs.xxx.$on('hello',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

全局事件总线（GlobalEventBus）

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

2. 原理：因为所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象，所以所有组件对象都能看到 Vue 原型对象上的属性和方法，Vue.prototype.$bus，所有的组件对象都能看到$bus 这个属性对象

3. 安装全局事件总线(在main.js文件里)：

   new Vue({
   	......
   	beforeCreate() {  // 尽量早的执行挂载全局事件总线对象的操作
   		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
   	},
       ......
   }) 
   

4. 使用事件总线：

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

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)//也可以直接把整个回调函数体写在这里
      }
      

   2. 提供数据：this.$bus.$emit('xxxx',数据)（可以设置在某个方法函数内部）

5. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件(哪里绑定哪里解绑)。

消息订阅与发布 (pubsub)

1. 一种组件间通信的方式，适用于任意组件间通信。需要引入一个消息订阅与发布的第三方实现库: PubSubJS

2. 思想与全局事件总线很相似，但每一次订阅都会生成一个订阅id，标识符，类似定时器。(1) 订阅消息 --对应绑定事件监听 (2) 发布消息 --分发事件 (3) 取消消息订阅 --解绑事件监听

3. 使用步骤：

   1. 安装pubsub：npm i -s pubsub-js

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

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

      methods(){
        demoFun(data){......}
      }
      ......
      mounted() {
        this.pid = pubsub.subscribe('xxx',this.demoFun) //订阅消息
          // 这里与全局总线不一致，应使用回调函数名或箭头函数，因为这里是第三方库里面,普通函数this=null。
      }
           ---另一种
      mounted() {
        this.pid = pubsub.subscribe('xxx',(msgName, data) => {
          // msgName是消息名（xxx），data是订阅到的发布的数据
          this.msg = data;
      }
      

   4. 提供数据（发布消息）：pubsub.publish('xxx',数据)

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

nextTick

1. 语法：this.$nextTick(回调函数)

2. 作用：在下一次 DOM 更新结束后执行其指定的回调。

3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

   this.$nextTick(function(){
   	this.$refs.inputTitle.focus()  //更新dom后重新获得焦点
   })