插槽
插槽是什么?
在 Vue 2 中,插槽(slot)是一种用于定义组件内部内容分发的机制。它允许你将组件中的一部分内容替换为用户自定义的内容,并在组件内部进行渲染。
通过在组件模板中使用 <slot></slot>
标签,你可以指定一个插槽的位置。这个位置可以被父组件中的任意内容所填充。父组件中的内容将被插入到插槽所在的位置,并最终与组件的其他部分一起进行渲染。
普通插槽
首先建立弹窗组件,在内容的位置添加 <slot></slot>
标签:
<template>
<div class="dialog">
<div class="dialog-header">
<h3>友情提示</h3>
<span class="close">✖️</span>
</div>
<div class="dialog-content">
<!-- 为组件添加插槽 -->
<slot>你确认要退出本系统么?</slot>
</div>
<div class="dialog-footer">
<button>取消</button>
<button>确认</button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
.dialog {
width: 470px;
height: 230px;
padding: 0 25px;
background-color: #ffffff;
margin: 40px auto;
border-radius: 5px;
}
.dialog-header {
height: 70px;
line-height: 70px;
font-size: 20px;
border-bottom: 1px solid #ccc;
position: relative;
}
.dialog-header .close {
position: absolute;
right: 0px;
top: 0px;
cursor: pointer;
}
.dialog-content {
height: 80px;
font-size: 18px;
padding: 15px 0;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}
.dialog-footer button {
width: 65px;
height: 35px;
background-color: #ffffff;
border: 1px solid #e1e3e9;
cursor: pointer;
outline: none;
margin-left: 10px;
border-radius: 3px;
}
.dialog-footer button:last-child {
background-color: #007acc;
color: #fff;
}
</style>
在父组件中引入组件,并且在组件标签中写入内容。如果不写将展示默认 <slot></slot>
标签里面的文字,默认内容,也叫做后备内容。
<!-- 结构 -->
<template>
<div id="app">
<!-- 组件标签中的内容将自动填充到插槽中,如果其中不写内容将展示 上面slot标签中的“你确认要退出本系统么?” -->
<MyDialog>你好!欢迎使用vue2</MyDialog>
</div>
</template>
<!-- 行为 -->
<script>
// import MyBodys from './components/MyBodys.vue';
import MyDialog from './components/MyDialog.vue';
export default {
name: "App",
data() {
return {
};
},
components:{
MyDialog
}
};
</script>
<!-- 样式 -->
<style>
#app {
width: 100%;
height: 700px;
background-color: rgb(167, 167, 167);
overflow: hidden;
}
*{
margin: 0;
padding: 0;
}
</style>
最后效果成功填充了弹窗中的内容:
具名插槽
一个组件可以拥有多个插槽,每个插槽可以有不同的名称,以便在父组件中选择性地进行内容分发。父组件可以使用 <template>
和 <slot>
标签的 name 属性来决定插槽的位置和名称。
插槽的使用可以使组件更具灵活性,让父组件能够向子组件传递不同的内容,并在组件内部进行渲染。这在构建可重用的组件和布局时非常有用。
比如其中 弹出框的 标题 ,内容,以及按钮都不一样,我们就可以使用具名插槽来更改代码,为slot标签取名(name属性)
为组件中的slot取名:
<template>
<div class="dialog">
<div class="dialog-header">
<!-- 标题取名 -->
<h3 ><slot name="title">友情提示</slot></h3>
<span class="close">✖️</span>
</div>
<div class="dialog-content">
<!-- 为组件添加插槽,内容取名 -->
<slot name="content">你确认要退出本系统么?</slot>
</div>
<div class="dialog-footer">
<!-- 尾部按钮取名 -->
<slot name="button">
<button>取消</button>
<button>确认</button>
</slot>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
.dialog {
width: 470px;
height: 230px;
padding: 0 25px;
background-color: #ffffff;
margin: 40px auto;
border-radius: 5px;
}
.dialog-header {
height: 70px;
line-height: 70px;
font-size: 20px;
border-bottom: 1px solid #ccc;
position: relative;
}
.dialog-header .close {
position: absolute;
right: 0px;
top: 0px;
cursor: pointer;
}
.dialog-content {
height: 80px;
font-size: 18px;
padding: 15px 0;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}
.dialog-footer button {
width: 65px;
height: 35px;
background-color: #ffffff;
border: 1px solid #e1e3e9;
cursor: pointer;
outline: none;
margin-left: 10px;
border-radius: 3px;
}
.dialog-footer button:last-child {
background-color: #007acc;
color: #fff;
}
</style>
为父组件的组件标签添加template标签,配合子组件:
<!-- 结构 -->
<template>
<div id="app">
<!-- 组件标签中的内容将自动填充到插槽中 -->
<MyDialog>
<!-- 使用v-slot:title与组件中name属性为title的slot绑定 -->
<template v-slot:title>我是标题</template>
<!-- 使用v-slot:content与组件中name属性为content的slot绑定 -->
<template v-slot:content>我是内容</template>
<!-- #button是v-slot:button的简写 -->
<template #button>
<button>取消</button>
<button>确认</button>
</template>
</MyDialog>
</div>
</template>
<!-- 行为 -->
<script>
// import MyBodys from './components/MyBodys.vue';
import MyDialog from './components/MyDialog.vue';
export default {
name: "App",
data() {
return {
};
},
components:{
MyDialog
}
};
</script>
<!-- 样式 -->
<style>
#app {
width: 100%;
height: 700px;
background-color: rgb(167, 167, 167);
overflow: hidden;
}
*{
margin: 0;
padding: 0;
}
</style>
最后效果:
作用域插槽
插槽分类:
- 默认插槽(组件内定制一处结构)
- 具名插槽(组件内定制多处结构)
作用域插槽: 是插槽的一个传参语法.
删除或查看都需要用到 当前项的 id,属于 组件内部的数据 通过 作用域插槽 传值绑定,进而使用
1.渲染子组件,并且在子组件slot标签中添加:all="item" :msg="item.id"
属性,用于作用域插槽 传值。
<template>
<table class="my-table">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年纪</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in data" :key="item.id">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<!-- 为插槽提供返回数据,返回的数据将会被包装为一个对象,包含了slot标签上的属性 -->
<slot :all="item" :msg="item.id">
<button>删除</button>
</slot>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: {
data: Array,
},
}
</script>
<style scoped>
.my-table {
width: 450px;
text-align: center;
border: 1px solid #ccc;
font-size: 24px;
margin: 30px auto;
}
.my-table thead {
background-color: #1f74ff;
color: #fff;
}
.my-table thead th {
font-weight: normal;
}
.my-table thead tr {
line-height: 40px;
}
.my-table th,
.my-table td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.my-table td:last-child {
border-right: none;
}
.my-table tr:last-child td {
border-bottom: none;
}
.my-table button {
width: 65px;
height: 35px;
font-size: 18px;
border: 1px solid #ccc;
outline: none;
border-radius: 3px;
cursor: pointer;
background-color: #ffffff;
margin-left: 5px;
}
</style>
2.在template中,通过 #插槽名="obj” 接收,默认插槽名为 default文章来源:https://www.toymoban.com/news/detail-705079.html
<!-- 结构 -->
<template>
<div id="app">
<!--通过 #插槽名="obj” 接收,默认插槽名为default -->
<MyTable :data="list" #default="obj">
<!-- 写删除方法 -->
<button @click="deletelist(obj)">删除</button>
</MyTable>
<!--通过 #插槽名="obj” 接收,默认插槽名为default -->
<MyTable :data="list2" #default="obj">
<!-- 写查看方法 -->
<button @click="chakanlist(obj)">查看</button>
</MyTable>
</div>
</template>
<!-- 行为 -->
<script>
// import MyBodys from './components/MyBodys.vue';
import MyTable from './components/MyTable.vue';
export default {
name: "App",
data() {
return {
list: [
{ id: 1, name: '张小花', age: 18 },
{ id: 2, name: '孙大明', age: 19 },
{ id: 3, name: '刘德忠', age: 17 },
],
list2: [
{ id: 1, name: '赵小云', age: 18 },
{ id: 2, name: '刘蓓蓓', age: 19 },
{ id: 3, name: '姜肖泰', age: 17 },
]
};
},
components:{
MyTable
},
methods:{
chakanlist(obj){
console.log(obj.all)
console.log(obj.msg)
alert("姓名:"+obj.all.name+" 年龄:"+obj.all.age)
},
deletelist(obj){
this.list = this.list.filter(item => item.id != obj.all.id)
}
}
};
</script>
<!-- 样式 -->
<style>
#app {
width: 100%;
height: 700px;
background-color: rgb(255, 255, 255);
overflow: hidden;
}
*{
margin: 0;
padding: 0;
}
</style>
效果:
文章来源地址https://www.toymoban.com/news/detail-705079.html
到了这里,关于【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!