vue动态组件及插槽

组件进阶

组件进阶 - 动态组件

目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件、

组件进阶 - 组件缓存

目标: 组件切换会导致组件被频繁销毁和重新创建, 性能不高

使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁

演示1: 可以先给UserName.vue和UserInfo.vue 注册created和destroyed生命周期事件, 观察创建和销毁过程

演示2: 使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁

语法:

​ Vue内置的keep-alive组件 包起来要频繁切换的组件

补充生命周期:

• activated - 激活
• deactivated - 失去激活状态

总结: keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法

组件进阶 - 激活和非激活

目标: 被缓存的组件不再创建和销毁, 而是激活和非激活

补充2个钩子方法名:

​ activated – 激活时触发

​ deactivated – 失去激活状态触发

组件进阶 - 组件插槽

目标: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容

vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽

组件进阶 - 插槽默认内容

目标: 如果外面不给传, 想给个默认显示内容

夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用夹着的内容在原地显示

<slot>默认内容</slot>

组件进阶 - 具名插槽

目标: 当一个组件内有2处以上需要外部传入标签的地方

传入的标签可以分别派发给不同的slot位置

要求: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

v-slot可以简化成#使用

v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#

总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

组件进阶 - 作用域插槽

目标: 子组件里值, 在给插槽赋值时在父组件环境下使用

复习: 插槽内slot中显示默认内容

例子: 默认内容在子组件中, 但是父亲在给插槽传值, 想要改变插槽显示的默认内容

1. 子组件, 在slot上绑定属性和子组件内的值
2. 使用组件, 传入自定义标签, 用template和v-slot=“自定义变量名”
3. scope变量名自动绑定slot上所有属性和值

自定义指令

自定义指令文档

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx

html+css的复用的主要形式是组件

你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

自定义指令-注册

目标: 获取标签, 扩展额外的功能

局部注册和使用

目标: 创建 “自定义指令”, 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令 v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行

全局注册

在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用指令