📝个人主页：五敷有你
🔥系列专栏：Vue
⛺️稳中求进，晒太阳
插槽
作用：让组件内部一些 结构 支持 自定义
插槽的分类：
- 默认插槽。
- 具名插槽。
基础语法
组件内需要定制的结构部分，改用占位
html
<template>
<div class="main">
<h2>确认吗</h2>
<slot></slot>
<div class="bottom">
<button>确认</button><button>取消</button>
</div>
</div>
</template>使用组件时，标签内部，传入结构替换slot
html
<BaseA>我是插槽练习</BaseA>插槽的默认值
通过插槽完成内容的定制，传什么显示什么，但是不传，则是空白
插槽的后备内容：封装组件时，可以为预留的插槽提供后备内容（默认内容）
- 语法：在slot标签内，放置内容，作为默认显示内容
- 效果：
- 外部使用组件不传东西，则slot会显示后备内容
- 外部使用组件传东西了，则slot整体会被替换掉
具名插槽（一个组件有多处结构需要外部传入标签，进行定制）
语法：
多个slot使用name属性区分名字
简写：v-slot:插槽名 简化---- #插槽名
html
<div class="main">
<h2>
<slot name="head"></slot>
</h2>
<slot name="body">我是默认值</slot>
<div class="bottom">
<slot name="foot"></slot>
</div>
</div>template配置v-slot:名字 来分发对应标签
html
<BaseA>
<template v-slot:head>
我是标题
</template>
<template v-slot:body>
<p>我是身体</p>
</template>
<template v-slot:foot>
<button>确认</button><button>取消</button>
</template>
</BaseA>作用域插槽
作用域插槽：定义slot插槽的同时，是可以传值的，给插槽上 可以绑定数据， 将来 使用组件时可以用
场景：封装表格组件
基本使用步骤：
- 给slot标签，以添加属性的方式传值。
html
<slot :id="item.id" msg="测试文本"></slot>- 所有添加属性，都会收集到一个对象中
html
{id:3,msg:"测试文本"}- 在template中，通过 #插槽名='obj'接收，默认插槽名为 default
html
<MyTable :list="list">
<template #default="obj">
<button @click="del(obj.id)">删除</button>
</template>
</MyTable> 商品列表（实战）：
App.vue
html
<template>
<div id="app">
<MyTable :list="list">
<template #thead>
<td>编号</td>
<td>图片</td>
<td>名称</td>
<td>标签</td>
</template>
<template #tbody="{item,index}" >
<td>{{ index+1 }}</td>
<td>{{ item.img }}</td>
<td>{{ item.name }}</td>
<td><MyEle v-model="item.sign"></MyEle></td>
</template>
</MyTable>
</div>
</template>
<script>
import MyEle from "./components/MyEle.vue"
import MyTable from "./components/MyTable.vue"
export default {
data(){
return{
list:[
{id:101,img:'001',name:"紫砂壶",sign:"茶具"},
{id:102,img:'001',name:"皮鞋",sign:"男鞋"},
{id:103,img:'001',name:"棉衣",sign:"衣服"},
{id:104,img:'001',name:"毛衣",sign:"衣服"},
{id:105,img:'001',name:"帽子",sign:"衣服"}
]
}
},
components:{
MyEle,
MyTable
},
methods:{
},
//局部注册指令
directives:{
//指令名：指令配置项
color:{
inserted(el,binding){
el.style.color=binding.value
},
update(el,binding){
el.style.color=binding.value
}
}
},
}
</script>
<style scoped>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
margin-top: 60px;
display: flex;
justify-content: space-around;
}
</style>MyTable.vue
html
<template>
<div class="main">
<table border="1">
<thead>
<tr>
<!-- <td>编号</td>
<td>图片</td>
<td>名称</td>
<td>标签</td> -->
<slot name="thead">
</slot>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="item.id">
<slot name="tbody" :item="item" :index="index" ></slot>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props:{
"list":Array,
}
}
</script>
<style scoped>
</style>Mytag.vue
html
<template>
<div class="main">
<div class="ele" v-if="isShow" @click="isShow=false">
{{ value }}
</div>
<div v-else>
<input type="text" :value="value" v-focus @keyup.enter='update'>
</div>
</div>
</template>
<script>
export default {
props:{
"value":String
},
data(){
return {
isShow:true,
}
},
directives:{
focus:{
inserted(el){
el.focus()
}
}
},
methods:{
update(e){
this.$emit("input",e.target.value)
this.isShow=true
}
}
}
</script>
<style scoped>
.ele{
text-align: center;
color:rgb(50, 49, 49);
font-size: 15px;
}
input{
padding: 3px 4px;
color:gray;
font-size: 13px;
}
</style>