插槽根本应用
父组件
index.vue
<son1> <template> I'm content </template></son1>components: { son1: () => import('./son1.vue'),}子组件
son1.vue
<div> <!-- 定义插槽 --> <!-- 定义能够用来被替换的构造 --> <slot>内容</slot></div><div>底部</div>具名插槽
父组件
index.vue
<son2> <!-- 简写模式 vant --> <template #content>I'm content</template> <template #foot>I'm foot</template> <!-- 原始模式 --> <template v-slot:content>I'm content</template> <template v-slot:foot>I'm foot</template> <!-- 被废除的用法：element --> <template slot="content">我是内容</template> <template slot="foot">我是底部</template></son2>components: { son2: () => import('./son2.vue'),}子组件
son2.vue
<div> <!-- 定义插槽 --> <!-- 定义能够用来被替换的构造 --> <slot name="content">内容</slot></div><div> <slot name="foot">底部</slot></div>默认插槽
父组件
index.vue
<son3> <template slot="content">我是内容</template> <template slot="foot">我是底部</template> <template #default> 我是头部的默认插槽 </template></son3>components: { son3: () => import('./son3.vue'),}子组件
son3.vue
<div> <!-- 没有 name 属性的插槽叫做默认插槽 --> <slot>头部</slot></div><div> <slot name="content">内容</slot></div><div> <slot name="foot">底部</slot></div>作用域插槽
父组件
index.vue
<son4> <!-- 给每本书增加一个 《》 --> <!-- 简写模式： vant --> <template #content="{list,a}"> <ol> <li v-for="(item, index) in list" :key="index"> 《{{ item.name }}》 </li> </ol> </template> <!-- 原始模式 --> <template v-slot:content="{list}"> <ol> <li v-for="(item, index) in list" :key="index"> 《{{ item.name }}123》 </li> </ol> </template> <!-- element中被废除的写法 --> <template slot="content" slot-scope="{ list, a }"> <ol> <li v-for="(item, index) in list" :key="index"> 《{{ item.name }}》 </li> </ol> <div>a:{{ a }}</div> </template> </son4>子组件
son4.vue
<div> <slot name="content" :list="list" a="a"> <ol> <li v-for="(item, index) in list" :key="index"> {{ item.name }} </li> </ol> </slot></div>data () { return { list: [ { id: 1, name: '三国演义' }, { id: 2, name: '红楼梦' }, { id: 3, name: '西游记' }, { id: 4, name: '水浒传' } ] }}