Vue笔记总结（Xmind格式）：第六天

Xmind鸟瞰图：

简单文字总结：

• 动态组件

  • 1.组件中name属性的作用

    • 递归组件:一个组件要用自己的时候，可以通过自己的名字来使用自己。

  • 2.组件缓存

    • 组件切换会导致组件被频繁销毁和重新创建, 所以性能不高,Vue内置的keep-alive组件包起来要频繁切换的组件

  • 3.动态组件切换

    • 1.多个组件使用同一个挂载点，并动态切换，这就是动态组件。

    • 2.使用:is用于动态组件且基于 DOM 内模板的限制解析来工作。

• 插槽

  • 1.匿名插槽

    • 1.组件内用<slot></slot>占位

    • 2.使用组件时夹着的地方, 传入标签替换slot

  • 2.具名插槽

    • 1.slot的name属性起插槽名

    • 2.使用组件时, template配合,使用v-slot进行绑定插槽的名称

    • 3.v-slot:可以简化成#使用

    • 4.v-bind可以省略成: v-on: 可以省略成@ v-slot: 可以简化成#

  • 3.作用域插槽

    • 1.子组件, 在slot上绑定属性和子组件内的值。

    • 2.使用组件, 传入自定义标签, 用template和v-slot="scope" (自定义变量名)。

    • 3.scope变量名自动绑定slot上所有属性和值。

• 自定义指令

  • 1.局部注册

    • 1.局部指令，需要定义在directives 的选项 用法和全局用法一样

    • 2.局部指令只能在当前组件里面使用

    • 3.当全局指令和局部指令同名时以局部指令为准

  • 2.全局注册

    • main.js定义处修改一下

• $refs和$nextTick

  • 1.nextTick

    • 1.目的:使用$nextTick()是为了可以获取更新后的DOM。

    • 2.原理:由于Vue中更新DOM是异步的,在修改数据之后,使用$nextTick等待DOM元素的更新,在回调函数中就可以获取更新后的DOM元素。

  • 2.refs

    • 1.$refs-获取DOM

    • 2.$refs-获取组件对象

详细Xmind原文档，在文章顶部自取下载！