Vue之组件基础（插槽）

在Vue中，插槽是一种让父组件能够向子组件传递标记的方法。这使得组件可以用作标记的容器，并允许开发者在不同的情况下使用不同的标记。

以下是一个简单的例子，展示了如何在Vue组件中使用插槽：

<!-- 子组件 MyComponent.vue -->
<template>
  <div>
    <!-- 定义一个插槽 -->
    <slot>
      <!-- 这里是默认插槽的内容 -->
      默认内容
    </slot>
  </div>
</template>
 
<script>
export default {
  name: 'MyComponent'
}
</script>

<!-- 父组件 App.vue -->
<template>
  <div>
    <!-- 使用子组件并填充插槽 -->
    <my-component>
      <p>这是父组件提供的内容。</p>
    </my-component>
  </div>
</template>
 
<script>
import MyComponent from './MyComponent.vue'
 
export default {
  components: {
    MyComponent
  }
}
</script>

在这个例子中，MyComponent 定义了一个插槽，而在父组件 App 中，我们在 <my-component> 标签之间添加了自定义的内容，这些内容将替换子组件中插槽的默认内容。如果父组件没有提供插槽内容，则会显示默认内容。