vue自定义组件插槽

Vue自定义组件插槽是一种在组件之间传递内容的机制，允许父组件向子组件插入自定义内容。在父组件中使用<slot></slot>标签来定义插槽，在子组件中使用<slot></slot>标签来接收插槽内容。

例如，假设有一个父组件Parent和一个子组件Child，父组件中定义了一个名为default的插槽：

<!-- Parent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

在使用Parent组件的时候，可以在父组件内部插入任意内容，并通过插槽将该内容传递给子组件：

<!-- App.vue -->
<template>
  <div>
    <Parent>
      <p>This is some content passed to the Parent component.</p>
    </Parent>
  </div>
</template>

<script>
import Parent from '@/components/Parent.vue'

export default {
  components: {
    Parent
  }
}
</script>

在子组件中，可以使用<slot></slot>标签来展示父组件传递的内容：

<!-- Child.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

这样，最终渲染的结果会是父组件中的内容被传递到了子组件中进行展示。