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>

 

四 運行效果