29、自定义指令
(1)概念:自己定义的指令,可以封装一些dom操作,扩展额外的功能。
(2)分类:
1)全局注册
2)局部注册
3)示例:
让表单元素一进入页面就获取焦点
①全局注册
效果:
②局部注册
(效果和全局注册一样,但作用范围不同)
(3)指令的值
自定义指令可以通过等号赋值的形式传参,这个值可以通过binding.vue获取
示例:
效果:
(4)封装v-loading加载中指令
加载中显示
加载完成,显示:
代码逻辑:
30、插槽
(1)默认插槽
1)作用:让组件内部的一些结构支持自定义
2)语法:
①组件内需要定制的结构部分,改用<slot></slot>占位
②使用组件时,<MyDialog></ MyDialog >标签内部,传入结构替换slot
③示例:
逻辑:
(2)后备内容(默认值)
1)概念:封装组件时,可以为预留的’<slot>’插槽提供后备内容(默认内容)
2)语法:在<slot>标签内,放置内容,作为默认显示的内容
3)效果:
①外部使用组件时,不传东西,则slot会显示后备内容
②外部使用组件时,传东西了,则slot整体会被换掉
4)示例:
学累了,记得歇歇嗷!我先歇为敬