Vue学习记录7，全局事件总线（GlobalEventBus），TodoList案例_事件总线，消息订阅与发布（pubsub），TodoList案例_编辑，nextTick，Vue封装的过度与动画

全局事件总线（GlobalEventBus）

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

2. 安装全局事件总线：

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

3. 使用事件总线：

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

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

   2. 提供数据：

  methods:{
    sendStudentName(){
        this.$bus.$emit('xxxx',this.name)
    }
}

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

beforeDestory(){
    this.$bus.$off('xxxx')
}

TodoList案例_事件总线

App.vue

mounted(){
    this.$bus.$on('checkTodo',this.checkTodo)
    this.$bus.$on('deleteTodo',this.deleteTodo)
},
beforeDestory() {
    this.$bus.$off('checkTodo')
    this.$bus.$off('deleteTodo')
}

TodoItem.vue

methods:{
    //勾选或取消勾选
    handleCheck(id){
        //通知App将对应的todo对象done值取反
        this.$bus.$emit('checkTodo',id)
    },
    //删除
    deleteList(id){
        if(confirm('确定删除吗？')){
            //通知App将对应的todo对象done值删除
            this.$bus.$emit('deleteTodo',id)
        }
    }
}

消息订阅与发布（pubsub）

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

2. 使用步骤：

   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. 提供数据：

        methods:{
            sendStudentName(){
                pubsub.publish('hello',666)
            }
        }

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

TodoList案例_pubsub

App.vue

//删除一个todo
      deleteTodo(_,id){//用_占位
           this.todoList = this.todoList.filter(todo => todo.id !== id)
      
      }
      
......     
     
mounted(){
    this.$bus.$on('checkTodo',this.checkTodo)
    this.pubid = pubsub.subscribe('deleteTodo',this.deleteTodo)
},
beforeDestory() {
    this.$bus.$off('checkTodo')
    pubsub.unsubscribe(this.pubid)
}

TodoItem.vue

deleteList(id){
    if(confirm('确定删除吗？')){
        pubsub.publish('deleteTodo',id)
    }
}

TodoList案例_编辑

TodoItem.vue

<input v-show="todoObj.isEdit" type="text" :value="todoObj.title" @blur="blurList(todoObj,$event)" ref="inputTitle">
......
            //编辑
            editList(todoObj){
                if(todoObj.hasOwnProperty.call('isEdit')){
                    todoObj.isEdit = true
                }else {
                    this.$set(todoObj,'isEdit','true')
                }
                this.$nextTick(function () {
                    this.$refs.inputTitle.focus()
                })
            //失去焦点回调，真正实现修改
            blurList(todoObj,event){
                todoObj.isEdit = false
                if(!event.target.value.trim()) return alert('输入不能为空')//trim()取消空白符
                this.$bus.$emit('uppdateTodo',todoObj.id,event.target.value)
            }

App.vue

//修改
uppdateTodo(id,title){
    this.todoList.forEach(todo =>{
        if(todo.id === id) todo.title = title
    })
}
......
this.$bus.$on('uppdateTodo',this.uppdateTodo)
......
pubsub.unsubscribe(this.pubid)

nextTick

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

Vue封装的过度与动画

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

2. 图示：
   

3. 写法：

   1. 准备好样式：

      • 元素进入的样式：
        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点
      • 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点

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

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

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

案例

<div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group name="hello" appear>
        <h1 v-show="!isShow" class="go" key="1">你知道吗？</h1>
        <h1 v-show="isShow" class="go" key="2">你是个大傻瓜！</h1>
    </transition-group>
</div>

···

/*进入的起点、离开的终点*/
.hello-enter,.hello-leave-to{
    transform: translateX(-100%);
}
/*进入的终点、离开的起点*/
.hello-enter-to,.hello-leave{
    transform: translateX(0px);
}
.hello-enter-active,.hello-leave-active{
    transition: 0.5s linear;
}

TodoList案例_过度与动画

<ul class="todo-main">
    <transition-group name="todo" appear>
        <TodoItem v-for="todoObj in todoList" :key="todoObj.id" :todoObj="todoObj"></TodoItem>
    </transition-group>
</ul>