vue2 自定义指令,插槽

一、学习目标

1.自定义指令

基本语法（全局、局部注册）
指令的值
v-loading的指令封装

2.插槽

默认插槽
具名插槽
作用域插槽

二、自定义指令

1.指令介绍

内置指令：v-html、v-if、v-bind、v-on... 这都是Vue给咱们内置的一些指令，可以直接使用
自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令

每个指令都有自己各自独立的功能

2.自定义指令

概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能

3.自定义指令语法

全局注册

js 复制代码

//在main.js中
Vue.directive('指令名', {
  "inserted" (el) {
    // 可以对 el 标签，扩展额外功能
    el.focus()
  }
})

局部注册

js 复制代码

//在Vue组件的配置项中
directives: {
  "指令名": {
    inserted () {
      // 可以对 el 标签，扩展额外功能
      el.focus()
    }
  }
}

使用指令

注意：在使用指令的时候，一定要先注册 ，再使用 ，否则会报错

使用指令语法： v-指令名。如：<input type="text" v-focus/>

注册指令时不用加v-前缀 ，但使用时 一定要加v-前缀

4.指令中的配置项介绍

inserted:被绑定元素插入父节点时调用的钩子函数
el：使用指令的那个DOM元素

三、自定义指令-指令的值

1.需求

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

2.语法

1.在绑定指令时，可以通过"等号"的形式为指令绑定具体的参数值

html 复制代码

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

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

js 复制代码

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

四、插槽-默认插槽

1.作用

让组件内部的一些结构支持 自定义

2.需求

将需要多次显示的对话框,封装成一个组件

3.问题

组件的内容部分，不希望写死 ，希望能使用的时候自定义。怎么办

4.插槽的基本语法

组件内需要定制的结构部分，改用<slot></slot>占位
使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot
给插槽传入内容时，可以传入纯文本、html标签、组件

5.代码示例

MyDialog.vue

html 复制代码

<template>
  <div class="dialog">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close">✖️</span>
    </div>

    <div class="dialog-content">
      <!-- 1. 在需要定制的位置，使用slot占位 -->
      <slot></slot>
    </div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style scoped>

</style>

App.vue

html 复制代码

<template>
  <div>
    <!-- 2. 在使用组件时，组件标签内填入内容 -->
    <MyDialog>
      <div>你确认要删除么</div>
    </MyDialog>

    <MyDialog>
      <p>你确认要退出么</p>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>

五、插槽-后备内容（默认值）

1.问题

通过插槽完成了内容的定制，传什么显示什么, 但是如果不传，则是空白

能否给插槽设置默认显示内容呢？

2.插槽的后备内容

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

3.语法

在标签内，放置内容, 作为默认显示内容

4.效果

外部使用组件时，不传东西，则slot会显示后备内容
外部使用组件时，传东西了，则slot整体会被换掉

六、插槽-具名插槽

1.需求

一个组件内有多处结构，需要外部传入标签，进行定制

上面的弹框中有三处不同 ，但是默认插槽 只能定制一个位置，这时候怎么办呢?

2.具名插槽语法

多个slot使用name属性区分名字
template配合v-slot:名字来分发对应标签

3.v-slot的简写

v-slot写起来太长，vue给我们提供一个简单写法 #

七、作用域插槽

1.插槽分类

默认插槽
具名插槽

插槽只有两种，作用域插槽不属于插槽的一种分类

2.作用

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

3.场景

封装表格组件

4.使用步骤

给 slot 标签, 以添加属性的方式传值
js 复制代码
```
<slot :id="item.id" msg="测试文本"></slot>
```
所有添加的属性, 都会被收集到一个对象中
js 复制代码
```
{ id: 3, msg: '测试文本' }
```

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

js 复制代码

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