Vue2自定义指令及插槽

这里写目录标题

• 自定义指令
• • 基础语法
  • 指令的值
  • 封装v-loading指令
• 插槽
• • 默认插槽
  • 后备内容（插槽的默认值）
  • 具名插槽
  • 作用域插槽

自定义指令

自定义指令：自己定义的指令，封装一些dom操作，扩展额外功能

基础语法

1. 全局注册：

   Vue.directive('指令名', {
   "inserted" (el) {
   
   el.focus()
   }
   })

2. 局部注册：

   dierctives: {
   "指令名": {
   inserted () {
   
   el.focus()
   }
   }
   }

使用时：<input v-指令名 type="text"/>

指令的值

需求：实现一个color指令-传入不同的颜色，给标签设置文字颜色

• 语法：在绑定指令时，通过等号的形式为指令绑定具体的参数值
  <div v-color="color">我是内容</div>
• 通过binding.value 可以拿到指令值，指令值修改时会触发update函数
  

实现实际需求：

【注意】：inserted提供的是元素被添加到页面当中的逻辑，要使修改指令后页面更新，需要编写update指令的逻辑

封装v-loading指令

需求：实际开发中，发送请求需要时间，在未请求到数据时页面处于空白状态 => 使用v-loading在这段时间添加动态加载效果

• 实现步骤：
  1. 准备一个loading类，通过伪元素定位，设置宽高实现蒙层
  2. 开启关闭loading状态（添加移动封层），本质是添加移除类
  3. 结合自定义指令的语法进行封装复用

插槽

插槽的分类：

① 默认插槽（组件内定制一处插槽）

② 具名插槽（组件内定制多处插槽）

默认插槽

• 基本语法
  1. 组件内需要定制的结构部分，改用<slot></slot>占位
  2. 使用组件时，<MyDialog></MyDialog>标签内部，传入结构替换slot

后备内容（插槽的默认值）

写在<slot></slot>标签内的为插槽的后备内容，当在使用组件使没有传入<MyDialog></MyDialog>则会显示后备内容

具名插槽

• 基本语法：

  1. 在slot标签中添加name属性
     eg：

     <slot name="color"></slot>
     <slot name="size"></slot>

  2. 在template标签中配合v-slot:名字来分发对应标签，简写方式：#名字
     eg:

     <MyDialog> <template v-slot: color></template> <template v-slot: size></template>

      <!-- 简写 -->
      <template #color></template>
      <template #size></template>

     </MyDialog>

作用域插槽

• 误区：作用域插槽不是插槽的一种分类 ，而是插槽的一个传参语法

• 作用域插槽：定义slot插槽的同时，是可以传值 的，给插槽上可以绑定数据 ，将来使用组件时可以用

• 场景：封装表格组件

  1. 父传子，动态渲染表格内容
  2. 利用默认插槽，定制操作列
  3. 删除或查看都需要用到当前项的id ，属于组件内部的数据 ，通过作用域插槽传值绑定 ，进而使用

• 基本使用步骤

  1. 给slot标签以添加标签属性的方式传值
     <slot :id="item.id msg="测试文本"></slot>

  2. 所有添加的属性，都会被收集到一个对象中
     { id: 3, msg: '测试文本'}

  3. 在template中，通过#插槽名="obj"接收，默认插槽名为default

     <MyTable :list="list"> <template #default="obj"> <button @click="del(obj.id)">删除</button> </template> </MyTable>