slot-插槽

• 在Vue中，插槽是一种用于在组件中扩展内容的机制。插槽可以接受参数，并且允许在父组件中向子组件传递数据。下面是一种常见的方法来在Vue中使用插槽传递参数：

步骤：

1. 父组件中定义插槽并传递参数：

• v-slot:customSlot 可以简写为 #customSlot

<template>
  <div>
    <child-component>
      <template v-slot:customSlot="slotProps">
        <p>{{ slotProps.param }}</p>
      </template>
    </child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slotParam: 'Hello from parent component',
    };
  },
};
</script>

2. 子组件中使用具名插槽并接收参数：

<template>
  <div>
    <slot name="customSlot" :param="slotParam"></slot>
  </div>
</template>

<script>
export default {
  props: ['slotParam'],
};
</script>

• 在父组件中，通过v-slot指令和插槽名customSlot来定义具名插槽，并通过参数slotProps来接收传递的数据。在子组件中，使用<slot> 标签指定具名插槽的名称，并将参数 :param="slotParam" 绑定到插槽中。
• 这样，父组件中的 slotParam 数据会通过具名插槽传递给子组件，并在子组件的具名插槽中通过 slotProps.param 访问