vue3 之v-slot使用,淘汰了之前scoped slots 的写法。

4,687 阅读1分钟
Vue3 写法

模板Component之定义 

   <div>       
              <p><input v-model="inputFilter" /></p>   
                 <slot name="content" :items="filteredList" />    
            </div>
 data() {   
     return {      
      inputFilter: ""        }; 
   },  
  props: ["items"],   
 computed: {      
  filteredList() {            return this.items.filter(item => item.includes(this.inputFilter));        }    },

引用模板之页面定义

  <lay-out :items="['Jordan', 'Laker', 'Kobe', 'Tracy']">        <template v-slot:content="{ items }">            <p v-for="item in items" :key="item">{{ item }}</p>        </template>    </lay-out> 

在vue3中v-slot可以如上面这么写,以前的版本是如下这么写的。

<template>
  <List :items="items">
    <template slot-scope="{ filteredItems }">
      <p v-for="item in filteredItems" :key="item">{{ item }}</p>
    </template>
  </List>
</template>