Vue作用域插槽：用作循环结构的模版

 

一 项目结构

 

 

二 App组件

 

<template>
  <div id="app">
    <!-- 子组件 -->
    <todos :list="list"  v-slot:default="{item}">
      <!-- 插槽内容 -->
      <span v-if="item.isComplete">✓</span>
      {{item.text}}
    </todos>
  </div>
</template>

<script>
import Todos from "./components/Todos.vue";

export default {
  name: "app",
  data() {
    return {
      list: [
        {
          isComplete: true,
          text: "联网"
        },
        {
          isComplete: false,
          text: "玩游戏"
        }
      ]
    };
  },
  components: {
    Todos
  }
};
</script>

<style>
</style>

 

三 Todos组件

 

<template>
    <ul>
        <li v-for="(item,index) in list" :key="index">
            <!-- 作用域插槽：用作循环结构的模版 -->
            <slot :item="item"/>
        </li>
    </ul>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  }
};
</script>
<style>
</style>

 

四 运行效果