这里写目录标题
- 自定义指令
- 基础语法
- 指令的值
- 封装v-loading指令
- 插槽
- 默认插槽
- 后备内容（插槽的默认值）
- 具名插槽
- 作用域插槽
自定义指令
自定义指令：自己定义的指令，封装一些dom操作，扩展额外功能
基础语法
- 全局注册：
Vue.directive('指令名', {"inserted" (el) {<!-- 可以对el标签，扩展额外功能 -->el.focus()}
})
- 局部注册：
dierctives: {"指令名": {inserted () {<!-- 可以对el标签扩展额外功能 -->el.focus()}}
}
使用时：<input v-指令名 type="text"/>
指令的值
需求：实现一个color指令-传入不同的颜色，给标签设置文字颜色
- 语法：在绑定指令时，通过等号的形式为指令绑定具体的参数值
<div v-color="color">我是内容</div> - 通过binding.value可以拿到指令值，指令值修改时会触发update函数
实现实际需求：
【注意】：inserted提供的是元素被添加到页面当中的逻辑，要使修改指令后页面更新，需要编写update指令的逻辑
封装v-loading指令
需求：实际开发中，发送请求需要时间，在未请求到数据时页面处于空白状态 => 使用v-loading在这段时间添加动态加载效果
- 实现步骤：
- 准备一个loading类，通过伪元素定位，设置宽高实现蒙层
- 开启关闭loading状态（添加移动封层），本质是添加移除类
- 结合自定义指令的语法进行封装复用
插槽
插槽的分类：
① 默认插槽（组件内定制一处插槽）
② 具名插槽（组件内定制多处插槽）
默认插槽
- 基本语法
- 组件内需要定制的结构部分，改用
<slot></slot>占位 - 使用组件时，
<MyDialog></MyDialog>标签内部，传入结构替换slot
- 组件内需要定制的结构部分，改用
后备内容（插槽的默认值）
写在<slot></slot>标签内的为插槽的后备内容，当在使用组件使没有传入<MyDialog></MyDialog>则会显示后备内容
具名插槽
- 基本语法：
- 在slot标签中添加name属性
eg：
<slot name="color"></slot> <slot name="size"></slot>- 在template标签中配合
v-slot:名字来分发对应标签，简写方式：#名字
eg:
<MyDialog><template v-slot: color></template><template v-slot: size></template><!-- 简写 --><template #color></template><template #size></template> </MyDialog> - 在slot标签中添加name属性
作用域插槽
-
误区：作用域插槽不是插槽的一种分类，而是插槽的一个传参语法
-
作用域插槽：定义slot插槽的同时，是可以传值的，给插槽上可以绑定数据，将来使用组件时可以用
-
场景：封装表格组件
- 父传子，动态渲染表格内容
- 利用默认插槽，定制操作列
- 删除或查看都需要用到当前项的id，属于组件内部的数据，通过作用域插槽传值绑定，进而使用
-
基本使用步骤
- 给slot标签以添加标签属性的方式传值
<slot :id="item.id msg="测试文本"></slot> - 所有添加的属性，都会被收集到一个对象中
{ id: 3, msg: '测试文本'} - 在template中，通过
#插槽名="obj"接收，默认插槽名为default
<MyTable :list="list"><template #default="obj"><button @click="del(obj.id)">删除</button></template> </MyTable> - 给slot标签以添加标签属性的方式传值
