《v》 深入vue2/3：slot<slot>/v-slot的使用与解释

首先简单介绍一下基本定义和基本用途，然后深入讲解每种使用方法、细节和效果：

v-slot详解（父组件定义） 详解（子组件定义）

如果未声明，则默认名称为

用于范围槽

插槽类型：

是默认插槽 是命名插槽 是作用域插槽

插槽类型：1 和 2

// 父组件

父组件此时使用默认槽和命名槽，但是默认槽没有有用的包！ 虽然有效，但是根据官方的建议，这并不是很规范！

// 子组件 childComponent

默认值：当向槽位写入内容时，如果父组件没有提供槽位内容，则使用子组件槽位的默认内容。

如果子组件没有槽并且父组件声明要使用它，则声明的传入内容将被丢弃。

// childComponent

插槽类型：3.范围插槽

功能：父组件使用子组件中的数据。 父组件获取的是一个对象。 对象中的数据是子组件声明的槽对应的父组件可用的内容。

注意！ 父组件#name="{}" 这是js的解构《v》，也就是说获取到的是一个对象，里面包含了从子组件槽传递给父组件的数据。 对象中的键是 slot 属性的名称。

// 父组件

// 子组件 childComponent

<script>
export default {
  data(){
    return{
      childData:'吹响吧，上低音号',
      defaultData:'默认插槽的数据',
    }
  }
}
</script>

规格

1. 每当出现多个槽时，请始终对所有槽使用完整的基于语法：

2.当默认槽的v-slot缩写与作用域slot:一起使用时，虽然这种写法有效，但不推荐！ 原因：官方认为这种写法是无效的，会抛出警告。 但它确实有效，并且没有看到任何警告。 。

但为了统一规范，防止后续vue3迭代升级，就真的变得无效了。 。

统一写为：

// 父组件