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>