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

Posted 2022-06-07 sea-breeze

 

一 项目结构

 

 

二 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>

 

四 运行效果