自定义指令 & 插槽

自定义指令

基本语法

• 作用：可以封装一些 dom 操作，扩展额外功能

• 语法：

  • 全局注册

    Vue.directive('指令名', {
        inserted(el) {
            // el 就是指令所绑定的元素
            el.focus()
        }
    })
    

  • 局部注册

    directives: {
        '指令名': {
            inserted (el) {
                // el 就是指令所绑定的元素
                el.focus()
            }
        }
    }
    

  • 使用

    <input v-指令名 type="text">
    

• inserted：指令的生命周期钩子函数，会在指令所在的元素被插入到页面时触发

指令的值

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

• 语法：在绑定自定义指令时，可以为指令绑定值：

  <div v-color="color">我是内容</div>
  

• 通过 binding.value 可以拿到指令值，指令值修改会触发 update 函数：

  directives: {
      color: {
          inserted (el, binding) {
       	   el.style.color = binding.value
          },
          update (el, binding) {
        	   el.style.color = binding.value
          }
      }
  }
  

• update：指令的生命周期钩子函数，可以监听指令值的变化，在指令值变化时触发

插槽

• 作用：让组件内部的一些结构支持自定义
• 需求：将需要多次显示的对话框, 封装成一个组件
• 分析：组件的内容部分，不希望写死，需要能使用的时候自定义，此时就需要使用到插槽

基本语法

基本语法：

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

默认值

插槽后备内容：封装组件时，可以为预留的 <slot> 插槽提供后备内容（默认值）

具名插槽

• 使用场景：当组件内有多处不确定的结构，需要用到具名插槽
• 使用步骤如下：
  1. slot 占位，给 name 属性起名字来区分
  2. template 配合 v-slot:插槽名 分发内容
• v-slot:插槽名 可以简化为 #插槽名

作用域插槽

• 作用域插槽：是插槽的一个传参语法，定义 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>