VUE--slot(插槽)的简单使用

// 父组件
<template>
  <ChaCao :title="'测试'">
    <div>插槽N</div>
  </ChaCao>
</template>
<script>
import ChaCao from './ChaCao.vue'
export default {
  components: {
    ChaCao
  }
}
</script>
<style scoped>

</style>

// 子组件
<template>
  <el-card>
    <div
      slot="header"
      v-if="title!==''"
    >
      {{ title }}
    </div>
    <slot />
  </el-card>
</template>
<script>
export default {
  name: 'ChaCao',
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>
<style scoped>

</style>

结果页面：