vue slot实际应用

Vue的插槽（slot）是一种强大的功能，用于在组件中插入内容。它允许父组件向子组件传递内容，并在子组件中进行渲染。插槽可以带有数据，这使得它们在实际应用中非常有用。

以下是一个示例，展示了Vue插槽的实际应用：

<!-- 父组件 -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent>
      <template v-slot:default>
        <p>这是插槽的默认内容</p>
      </template>
      <template v-slot:custom>
        <p>这是带有数据的插槽内容：{{ message }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>子组件</h2>
    <slot></slot>
    <slot name="custom"></slot>
 </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

在上面的示例中，父组件中的`ChildComponent`组件包含了两个插槽：`default`和`custom`。父组件通过`<template>`标签来定义插槽的内容，并使用`v-slot`指令来指定插槽的名称。

子组件中使用`<slot>`标签来渲染插槽的内容。`<slot>`标签可以放在组件的任何位置，用于显示父组件传递的内容。在子组件中，可以使用`name`属性来指定具名插槽的名称。

通过这种方式，父组件可以向子组件传递不同的内容，并根据需要进行渲染。这使得组件的复用性和灵活性大大增强。