vue插槽
插槽作用:让组件内部的一些结构支持自定义。
1 默认插槽
默认插槽基本语法:
1.组件内需要定制的结构部分,改用占位
2.使用组件时,直接在标签内部,传入结构替换slot
需求:在页面中显示两个列表 一个是员工信息列表 一个是学生信息列表 对组件中的地方进行定制
默认插槽只能完成一个位置的定制 如果还想完成多个地方的定制就要使用具名插槽
AnLi.vue组件代码:
<template>
<div class="box">
<!-- 1在需要定制的地方进行<slot></slot>占位 -->
<slot>我是备用内容 如果不插槽我将会显示</slot>
<table
style="border-collapse: collapse; width: 500px; text-align: center"
align="center"
border="1"
>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
h1 {
text-align: center;
}
</style>
App.vue组件代码:
<template>
<div id="app">
<!-- 2在使用组件时。在其标签内填入内容 在这里使用AnLi组件 填入<h1>员工信息列表</h1>内容 -->
<AnLi>
<h1>员工信息列表</h1>
</AnLi>
<AnLi>
<h1>学生信息列表</h1>
</AnLi>
</div>
</template>
<script>
import AnLi from "./components/AnLi.vue";
export default {
data() {
return {};
},
components: {
AnLi,
},
};
</script>
<style scoped>
img {
display: block;
width: 500px;
margin: 0 auto;
}
</style>
运行结果:
2 具名插槽
具名插槽基本语法:
1 多个slot使用name属性区分名字
2 .template配合v-slot:名字来分发对应标签 v-slot可以用#进行简写
AnLi.vue组件代码:
<template>
<div class="box">
<!-- 1在需要定制的地方进行<slot></slot>占位 并给name属性 -->
<slot name="biaoti">我是备用内容 如果不插槽我将会显示</slot>
<slot name="tupian"></slot>
<table
style="border-collapse: collapse; width: 500px; text-align: center"
align="center"
border="1"
>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
h1 {
text-align: center;
}
</style>
app.vue组件代码:
<template>
<div id="app">
<!-- 2在使用组件时。在其标签内填入内容 在这里使用AnLi组件 -->
<AnLi>
<!-- template配合v-slot:名字来分发对应标签 -->
<template v-slot:biaoti>
<h1>员工信息列表</h1>
</template>
//此处v-slot用简写方式
<template #tupian>
<img src="../img/1.jpg" alt="" />
</template>
</AnLi>
<AnLi>
<h1>学生信息列表</h1>
</AnLi>
</div>
</template>
<script>
import AnLi from "./components/AnLi.vue";
export default {
data() {
return {};
},
components: {
AnLi,
},
};
</script>
<style scoped>
img {
display: block;
width: 500px;
margin: 0 auto;
}
</style>
运行结果:
作用域插槽
作用域插槽:定义 slot 插槽的同时是可以传值的。给插槽上可以绑定数据,将来使用组件时可以用。
AnLi.vue组件代码:
<template>
<div class="box">
<!-- 1在需要定制的地方进行<slot></slot>占位 并给name属性 -->
<slot name="biaoti">我是备用内容 如果不插槽我将会显示</slot>
<table
style="border-collapse: collapse; width: 500px; text-align: center"
align="center"
border="1"
>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ index + 1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<!-- 1此处传值:row="item" msg="测试传参" 给父组件使用 -->
<slot name="caozuo" :row="item" msg="测试传参"></slot>
<!-- 2将所有属性添加到一个对象 app组件接受到的是一下对象
{
row: {…},
msg: '测试传参'
}
-->
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
props: ["list"],
};
</script>
<style scoped>
h1 {
text-align: center;
}
</style>
App.vue组件代码:
<template>
<div id="app">
<!-- 2在使用组件时。在其标签内填入内容 在这里使用AnLi组件 -->
<AnLi :list="list">
<!-- template配合v-slot:名字来分发对应标签 -->
<template v-slot:biaoti>
<h1>员工信息列表</h1>
</template>
<!-- 此处接受 用obj接受到 slot标签传递过来的对象-->
<template #caozuo="obj">
<!-- 此处需要拿到要删除的id item。id -->
<button @click="del(obj.row.id)">删除</button>
</template>
</AnLi>
<hr />
<hr />
<AnLi :list="list2">
<template v-slot:biaoti>
<h1>学生信息列表</h1>
</template>
<template #caozuo="item">
<button @click="show(item)">查看</button>
</template>
</AnLi>
</div>
</template>
<script>
import AnLi from "./components/AnLi.vue";
export default {
data() {
return {
list: [
{ id: 1, name: "赵露思", age: 17 },
{ id: 2, name: "小李子", age: 37 },
{ id: 3, name: "迪丽热巴", age: 27 },
],
list2: [
{ id: 1, name: "小米", age: 17 },
{ id: 2, name: "小名", age: 37 },
{ id: 3, name: "小红", age: 27 },
],
};
},
components: {
AnLi,
},
methods: {
del(id) {
// console.log(id);
this.list = this.list.filter((item) => item.id !== id);
},
show(item) {
// console.log(item);
alert(`姓名:${item.row.name} 年龄:${item.row.age}`);
},
},
};
</script>
<style scoped>
img {
display: block;
width: 500px;
margin: 0 auto;
}
</style>
运行结果: