vue中的插槽
- 组件通过插槽传入自定义结构
- 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
- vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽
一般是子组件通过slot标签占一个坑 然后在父组件中写结构传入子组件
直接上案例
封装一个表格组件, 在表格组件内循环产生单元格
{
name: "小传同学",
age: 18,
headImgUrl:
"https://www.escook.cn/vuebase/pics/1.png",
},
{
name: "小黑同学",
age: 25,
headImgUrl:
"https://www.escook.cn/vuebase/pics/2.png",
},
{
name: "智慧同学",
age: 21,
headImgUrl:
"https://www.escook.cn/vuebase/pics/3.png",
}
- 封装MyTable.vue
<template> <table> <tr> <th>序号</th> <th>名字</th>