Vue中的插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的 标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

当结构需要定制化时，我们会大量使用到插槽！！！本文从匿名插槽、插槽后备内容、具名插槽、作用域插槽4方面着手，360度无死角的介绍插槽：

1. 匿名插槽

步骤1：子组件中使用 占位，例如在 my-dialog.vue 中 (挖坑)

步骤2：在使用组件的位置填充内容，例如 App.vue 中 (填坑)

结果：

请输入正确的手机号码！

这个HTML结构，直接替换

2. 插槽后备内容

可以给插槽提供后备内容，如果使用组件的时候没有填坑，就展示插槽的后备内容。

# 子组件


# 根组件

3. 具名插槽

具名插槽就是有名字的插槽，当一个组件内有多处需要外部传入标签进行定制化，就到了具名插槽表演的时机。

步骤1：子组件内，多个 slot 使用 name 属性区分名字

# 例如 my-dialog.vue 中

步骤2：根组件内，使用