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-获取组件对象
-
-