15 组件进阶

1 动态组件

什么是动态组件?
在同一个挂载点, 可以切换显示不同组件

如何使用动态组件?
vue内置的component组件, 配合is属性

如何切换?
改变is属性的值, 为要显示的组件名即可

频繁的切换会导致组件频繁创建和销毁呢，效率不高

怎么解决？

2 组件缓存

如何进行组件缓存?
vue内置的keep-alive组件把要缓存的组件包起来

组件缓存好处?
不会频繁的创建和销毁组件, 页面更快呈现

3 组件插槽

当组件内某一部分标签不确定怎么办?
用插槽技术

插槽具体如何使用?
1. 先在组件内用slot占位
2. 使用组件时, 传入具体标签插入


插槽运行效果?
传入的标签会替换掉slot显示

3.1 插槽的默认内容

如何给插槽设置默认显示内容?
slot标签内写好默认要显示内容


什么时候插槽默认内容会显示?
当使用组件并未给我们传入具体标签或内容时

3.2 具名插槽

组件内多处不确定的标签如何做?
slot占位, 给name属性起名字来区分

template配合v-slot:name分发要替换的标签v-slot: 可以简化成什么? #

3.3 作用域插槽

作用域插槽什么时候使用?
使用组件插槽技术时, 需要用到子组件内变量

作用域插槽使用口诀?
子组件在slot身上添加属性和子组件的值
使用组件处template配合v-slot=“变量名”收集slot身上的所有属性和值

案例

1 td的位置可能显示a标签，又可能显示img. 组件内有一处不确定，用占位

2插槽技术同时想使用子组件的变量，用作用域插槽

4 自定义指令

4.1 注册

自定义指令分为两种：

• 自定义局部指令：组件通过directives选项们只能在当前组件中使用

• 自定义全局指令：app的directive方法，可以在任意组件中使用

案例：当input元素挂载完成之后可以自动获取焦点

全局注册：

局部注册：

4.2 自定义指令_传值