vue每日一问(4)

51 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,点击查看活动详情

一。Vue组件之间的通信方式都有哪些

  • 通过 props 传递 (父传给子)
  • 通过 $emit 触发自定义事件 (子传给父)
  • 使用 $refs $children (父组件获取子组件实例)
  • 使用 $parent (子组件获取父组件实例)
  • 使用 $root (子组件获取根组件实例)
  • EventBus 中央事件总·线 (用于兄弟组件之前通信)
  • provide 与 Inject (祖孙组件之间通信)
  • $attrs$listeners (祖孙组件之间通信)
  • Vuex (全局状态管理)

二。双向数据绑定是什么

双向绑定:数据变化后更新视图,视图变化后更新数据。

实现方式:

  • 监听器(Observer):对所有数据的属性进行监听(利用Object.defineProperty里面的set方法,劫持监听所有的属性)
  • 解析器(Compiler):对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

三。Vue中的$nextTick有什么作用

在Vue中数据更新后,会重新渲染DOM,渲染DOM是需要时间的。

如果数据更新后,需要对DOM结构进行手动调整,这个时候就可以使用$nextTick,因为它里面定义的代码会在DOM更新完成后再执行。

四。说说你对vue的mixin的理解

mixin 用于对vue进行混入,包括全局混入和局部混入。

如果项目中所有的vue实例或者组件,都具有相同的一组数据,方法,计算属性,侦听器,生命周期函数

就可以通过全局混入的方式,统一定义这些成员,这样的话,所有的vue实例就不需要分别定义这些成员了

比如:每个vue实例都要有发送器请求的方法,就可以将请求方法全局混入,this.get,this.post

五。说说你对slot的理解?

插槽就是给组件的使用者,更多的定制化空间。

比如:一个表格组件,主要的功能是展示列表数据,可以通过插槽的方式定制表格的编辑按钮。

分类:

  • 默认插槽 (直接通过slot内置组件定义)
  • 具名插槽 (通过多个slot内置组件定义,需要设置不同的name属性值,在使用时必须要通过template内置组件的v-slot:name的方式指定)
  • 作用域插槽 (必须定义成具名插槽,可以同插槽传递一个数据出去,让插槽的使用者通过这份数据定制更多的功能)