Vue中的插槽Slot技术详解

// Com01.vue
<template>
  <h2>学习插槽</h2>
  <div>
    <slot>我是默认插槽，没给我传内容就会默认显示这句话</slot>
  </div>
</template>

// 父组件App.vue
<template>
  <Com01>
    <p>你好，世界!</p>
    <!-- <p>你好，世界!</p> -->
  </Com01>
</template>
<script setup>
import Com01 from './components/Com01.vue'
</script>

// 子组件 Com02.vue
<template>
  <div>
    <slot name="header"></slot>
    <div class="content">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

// 父组件 App.vue
<template>
  <Com02>
    <template v-slot:header>
      <h2>我是头部内容!</h2>
    </template>
    <h2>你好，世界!</h2>
    <template v-slot:footer>
      <h2>我是底部内容!</h2>
    </template>
  </Com02>
</template>
<script setup>
import Com02 from './components/Com02.vue'
</script>

// 子组件 Category.vue
<template>
  <div class="category">
    <h3>{{title}}分类组件</h3>
    <slot :foods="foods" :games="games" :films="films">我是插槽1</slot>
  </div>
</template>
<script>
export default {
  name: "Category",
  props: ["title"],
  data(){
    return {
      foods: ["红烧肉","番茄炒蛋","鱼香肉丝"],
      games: ["红色警戒", "穿越火线", "魔兽世界"],
      films: ["肖申克的救赎", "火影忍者", "泰坦尼克号"]
    }
  }
}
</script>

// 父组件 App.vue
<template>
  <div class="container">
    <Category title="食物" >
      <template v-slot="scope">
        {{ scope }}
      </template>
    </Category>
  </div>
</template>
<script>
import Category from './components/Category.vue'
export default {
  name: "App",
  components: {Category},
}
</script>

// 父组件 App.vue
<template>
  <div class="container">
    <Category title="食物" >
      <template v-slot="scope">
        <ul>
          <li v-for="item in scope.foods">{{ item }}</li>
        </ul>
      </template>
    </Category>
  </div>
</template>
<script>
import Category from './components/Category.vue'
export default {
  name: "App",
  components: {Category},
}
</script>

// 子组件 Category02.vue
<template>
  <div class="category">
    <h3>{{title}}分类组件</h3>
    <slot name="header" :foods="foods" >我是插槽1</slot>
    <slot name="center" :games="games" >我是插槽2</slot>
    <slot name="footer" :films="films" >我是插槽3</slot>
  </div>
</template>
<script>
export default {
  name: "Category",
  props: ["title"],
  data(){
    return {
      foods: ["红烧肉","番茄炒蛋","鱼香肉丝"],
      games: ["红色警戒", "穿越火线", "魔兽世界"],
      films: ["肖申克的救赎", "火影忍者", "泰坦尼克号"]
    }
  }
}
</script>

// 父组件 App.vue
<template>
  <div class="container">
    <Category title="食物游戏电影" >
      <template v-slot:header="scope">
        <ul>
          <li v-for="item in scope.foods">{{ item }}</li>
        </ul>
      </template>
      <template v-slot:center="props">
        <ul>
          <li v-for="(item,index) in props.games" :key="index">{{ item }}</li>
        </ul>
      </template>
      <template #footer="scope">
        <ul slot="center">
          <li v-for="(item,index) in scope.films" :key="index">{{ item }}</li>
        </ul>
      </template>
    </Category>
  </div>
</template>
<script>
import Category from './components/Category02.vue'
export default {
  name: "App",
  components: {Category},
}
</script>

// 子组件 Com06.vue 
<template>
  <div>
    <button @click="toggleSlot">切换插槽</button>
    <slot :name="currentSlot"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentSlot: 'default666',
    };
  },
  methods: {
    toggleSlot() {
      this.currentSlot = this.currentSlot === 'default666' ? 'custom666' : 'default666';
    },
  },
};
</script>

// 父组件 App.vue
<template>
  <div>
    <Com06>
      <template v-slot:default666>
        <p>这是默认内容!</p>
      </template>
      <template v-slot:custom666>
        <p>这是自定义内容!</p>
      </template>
    </Com06>
  </div>
</template>
<script>
import Com06 from './components/Com06.vue'
export default {
  name: "App",
  components: {Com06},
}
</script>

<template>
  <div>
    <button @click="toggleSlot">切换插槽</button>
    <slot :name="currentSlot"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentSlot: 'default666',
    };
  },
  methods: {
    toggleSlot() {
      console.log("this.$slots: ", this.$slots);
      console.log("this.$slots.default666: ", this.$slots.default666);
      console.log("this.$slots.custom666: ", this.$slots.custom666);
    },
  },
};
</script>