Vue-slot插槽

插槽：父组件可以向子组件插入一段html结构
1、默认插槽
2、具名插槽
3、作用于插槽

一、默认插槽

Category.vue

<template>
  <div class="category">
    <h3>{
   {
    title }}分类</h3>
<!--    <ul>-->
<!--      <li v-for="(item,index) in listData" :key="index">-->
<!--        {
   {
   item}}-->
<!--      </li>-->
<!--    </ul>-->
<!--    默认插槽-->
    <slot></slot>
  </div>
</template>

<script>
export default {
   
  name: "Category",
  props:['listData','title']
}
</script>

<style scoped>
  .category{
   
    background