持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第3天,点击查看活动详情
事件总线的概念
是组件通讯的一种方式,适用于任意组件间通讯
如何安装事件总线呢
new vue ({
...
beforecreated(){
vue.prototype.$bus = this // 安装全局的事件总线,$bus相当于当前应用的vm
},
...
})
使用事件总线
1、接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义书剑,事件的回调留在A组件吱声
methods (){
demo(data){......}
}
.....
mounted(){
this.$bus.$on('xxx',this.demo)
}
2、提供数据:this.emit('xxx',数据)
最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
nextTick的语法及作用
1、语法:this.$nextTick(回调函数) 2、作用:在下一次DOM更新结束后执行其指定的回调 3、什么时候用:当改变数据后,要基于更新后的新Dom进行某些操作时,要在nextTick所指定的回调函数中执行
vue封装过度与动画
1、作用:在插入、更新或移除DOM元素时,在适合的时候给元素添加样式类名 图示
写法
1、准备好样式
- 元素进入的样式 v-enter: 进入的起点 v-enter-active:进入的过程中 v-enter-to: 进入的终点
- 元素离开的样式 v-leave: 离开的起点 v-leave-active:离开的过程中 v-leave-to: 离开的终点
2、使用包裹要过度的元素,配置name属性
<transition name="hi">
<h1 v-show = "isShow">你好啊!</h1>
</transition>
3、如果有多个元素需要过度,则需要使用,且每个元素都要指定key值