Vue插槽的使用

在Vue中，插槽是一种让父组件能够向子组件传递标记的方法。下面是如何使用插槽的例子：

1. 子组件中定义插槽：

<!-- ChildComponent.vue -->
<template>
 <div>
   <h1>我是子组件的标题</h1>
   <!-- 定义一个名为default的插槽 -->
   <slot>如果没有传入内容，这里是默认插槽内容</slot>
 </div>
</template>

3. 父组件中使用子组件，并填充插槽：

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component>
      <!-- 这里是插槽的内容 -->
      <p>这是父组件传递给子组件的内容</p>
    </child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  }
}
</script>

在这个例子中，标签代表了一个插槽的位置，当父组件使用时，可以通过插槽插入任何模板或组件。如果父组件没有提供内容，则会显示默认插槽中的内容。

内容来源于百度AI