Vue scope slots: a cyclic structure used as a template

 

A project structure

 

 

Two App Components

 

<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 three components

 

< Template > 
    < UL > 
        < Li V-for = "(Item, index) in List" : Key = "index" > 
            <-! Scope slots: a cyclic structure as a template -> 
            < slot : Item = "Item" /> 
        </ Li > 
    </ UL > 
</ Template > 
< Script > 
Export default { 
  The props: { 
    List: { 
      type: the Array, 
      default () {
         return [];
      }
    }
  }
};
</script>
<style>
</style>

 

Four operating results