vue学习day09-自定义指令、插槽

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）示例：

 

学累了，记得歇歇嗷！我先歇为敬