什么是插槽？

插槽（Slot）是vue为组建的封装者提供的能力，允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

插槽的基本用法

在封装组件时，可以通过<slot>元素定义插槽，从而为用户预留内容占位符。

为用户预留的占位符中写的内容是要显示在子组件中的，所以插槽元素一般是被用在子组件中的，在子组件中进行占位，这时在父组件中相应的组件标签写入内容，内容会自动进行填补。

通俗点理解就是，子组件作为了一个模板，拿到不同的父组件中使用，根据父组件的数据渲染出不同的效果呈现到子组件相应区域进而展示给用户，将引入父组件中的子组件标签内的内容渲染出来是我们的目的，所以这里用到了<slot>插槽占位符，在子组件中进行占位，然后在父组件的子组件标签中相应位置写入想要展现的内容即可。

插槽的基础用法

如果在封装组件时需要预留多个插槽点，这时就需要为每个插槽制定具体的name名称，这种带有名称的插槽叫做“具名插槽”，没有指定name名称的插槽，默认为“default”。

具名插槽

为具名插槽提供内容，我们可以在一个<template>元素上使用 v-slot 指令，并且以 v-slot 参数的形式提供其名称

为具名插槽提供内容

注意：

没有预留插槽的内容会被丢弃

无预留插槽

后备内容，封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容），如果组件的使用者没有为提供内容，后备内容会生效

后备内容演示

v-slot  的简写形式是“ # ”

作用域插槽（什么时候用到作用域插槽？父组件中如果想使用子组件中的数据进行自定义内容的渲染）

在封装组件的过程中，可以为预留的插槽绑定props（自定义属性：这里是通过解构赋值声明同名自定义变量）数据，这种带有props数据的插槽就是作用域插槽

作用域插槽

可以通过 v-slot：的形式，接收作用域插槽对外提供的数据,这个数据可以直接使用在组件中 例如：（v-slot ：指令只能用在组件标签或者<template>上） scope接收到的数据是对象，使用时直接用插值表达式就可以

接收数据方式

作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程，例如接收到的数据有名为user的对象，即 scope：{ user：{ id：122，name：‘zs’,  state:'xxx' } }, user的值是由其他组件通过自定义属性赋值过来的

示例代码如下：

解构赋值简化接收数据

总结代码：

插槽占位符可通过自定义属性接收当前组件中的数据（固定参数或者动态绑定参数都可以），可以传递并应用在插槽对应名称的组件内容区，通过插值表达式直接使用

自定义指令

每个vue组件中，可以在directives节点下声明私有自定义指令

声明私有自定义指令color

使用自定义指令，需要加上 v- 前缀

自定义属性的应用

在<template>结构中使用自定义指令时，通过等号（=）的方式，为当前指令动态绑定参数，参数是自己在data中定义的。

为自定义指令绑定参数

在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值：binding

binding获取指令的参数值

bind函数只调用一次：当指令第一次绑定到元素时调用，当DOM更新时bind函数不会被触发，update函数会在每次DOM更新时被调用。

如果insert和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式

简写成函数格式

全局自定义指令

在main.js中通过 Vue.directive() 进行声明

全局声明的自定义指令

自定义按钮级别的指令：