slot插槽
默认插槽
目的：组件的插槽使封装后的组件更具扩展性
基本使用：<slot></slot>
<body>
<div id="app">
<cpn></cpn>
<!-- 在vue实例中使用插槽 -->
<cpn> <button>按钮</button> </cpn>
<cpn> <input type="text">输入框 </cpn>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
<!-- 在子组件中定义插槽 -->
<!-- <slot></slot> -->
<!--也可在插槽中定义内容-->
<slot>
<h2>插槽默认内容 </h2>
</slot>
</div>
</template>
<script>
let app = new Vue({
el:'#app',
data:{
},
components:{
'cpn':{
template:'#cpn',
}
},
})
</script>
</body>
- 插槽相当于USB扩展屋，可以接不同的外设
- 若在定义插槽时有默认内容，使用时再添加则会替换默认内容
具名插槽(常用)
目的：可以准确地定位并使用某一个插槽
使用：给插槽加上name属性#
<body>
<div id="app">
<!-- 在vue实例中使用具名插槽: slot="name属性" -->
<cpn>
<!--替换对应插槽-->
<h2 slot="center">标题</h2>
<button slot="right"> 按钮 </button>
</cpn>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
<!-- 在子组件中定义具名插槽，加上name属性-->
<slot name="left"><span>left</span></slot>
<slot name="center"><span>center</span></slot>
<slot name="right"><span>right</span></slot>
</div>
</template>
<script>
let app = new Vue({
el:'#app',
data:{
},
components:{
cpn:{
template:'#cpn',
}
},
})
</script>
</body>
作用域插槽
目的：父组件替换子组件插槽的同时，将插槽的内容做些修改，但数据来源于子组件插槽
使用：绑定子组件插槽数据后，在父组件中通过slot-scope="slot"绑定插槽，并使用slot.绑定名获取数据
<body>
<div id="app">
<cpn></cpn>
<cpn>
<!--
使用template模板替换子组件插槽，`slot-scope="slot"`获取子组件插槽
join():遍历数组，参数为数组中数据的连接符
-->
<template slot-scope="slot">
<!-- 获取数据：slot.绑定名 -->
{{slot.tokyo.join(' - ')}}
</template>
</cpn>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
<!--
绑定子组件中的数据
绑定的属性名可任意，即tokyo
-->
<slot v-bind:tokyo="names">
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
let app = new Vue({
el:'#app',
data:{
},
components:{
cpn:{
template:'#cpn',
data(){
return{
names:["莉香","丸子","三上"]
}
}
}
},
})
</script>
</body>
作用域插槽使用最广泛，像element-ui的table表格就是对vue的插槽进一步的封装
使用方式：slot-scope = "scope", scope为自定义值，可随意声明
<template>
<el-table
ref="multipleTable"
:data="tableData"
<el-table-column
label="student"
align="center"
prop="name"
>
<template slot-scope="scope">
<el-row v-if="scope.row.sex== '男'">/</el-row>
<el-row v-else>{{ scope.row.name}}</el-row>
</template>
</el-table-column>
</el-table>
</template>
总结
- 默认插槽和具名插槽可类比一个萝卜一个坑，数据来源于使用插槽的父组件；父组件直接将解析好的DOM传给子组件
- 作用域插槽的数据来源于提供插槽的子组件，需要在子组件中的插槽上绑定传递给父组件的数据
- 具名插槽和作用域插槽可以混合使用
