Vue3’s use of V-slot eliminates the previous notation of scoped slots.

<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)); }}, reference template page definition of < lay - out: the items = "[' Jordan ', 'Laker', 'Kobe, 'Tracy']"> <template v-slot:content="{ items }"> <p v-for="item in items" :key="item">{{ item }}</p> </template> </lay-out>Copy the code

In VUE3 v-slot can be written as above, and in previous versions it was written as follows.

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