插槽使用
普通插槽
<slot></slot>
具名插槽
<slot name="name"></slot>
使用具名插槽
<template v-slot:name/>
<template #header />//简写
从插槽里面传值出来如何接收？
如：
发：
<slot name="name" left="123"></slot>
收：
<template v-slot:name="{left}"/>
<template #name="{left}"/>
如何判断某个插槽是否被使用
组件内部的this.$slots属性，可以显示某个插槽是否有元素。默认插槽为default，具名插槽为插槽name
this.$slots.hasOwnProperty(name)
结合插槽，写一个瀑布流加载组件
<template>
<div class="list">
<div class="list_item" >
<div ref="listLeft">
//把数据吐出去
<slot name="left" :left="leftList"></slot>
</div>
</div>
<div class="list_item">
<div ref="listRight">
//把数据吐出去
<slot name="right" :right="rightList"> </slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "indexto",
props: {
routesList: Array,
},
data() {
return {
list: [],
leftList: [],
rightList: [],
};
},
activated() {
},
mounted() {
this.list = [...this.routesList]
this.leftList = [];
this.rightList = [];
if(this.list.length > 0){
this.setList()
}
},
methods: {
remove(index,type){
if(type=='left'){
this.leftList.splice(index,1)
}else{
this.rightList.splice(index,1)
}
},
async setList() {
let that = this;
let item = this.list[0]//取第一个数据
let left = that.$refs.listLeft.clientHeight; //查左边的高度
let right = that.$refs.listRight.clientHeight; //查右边的高度
if (right >= left) { //右边高则忘左边加数据
this.leftList.push(item);
} else {
this.rightList.push(item);
}
// 移除临时列表的第一项
this.list.splice(0, 1);
// 如果临时数组还有数据，继续循环
if (this.list.length>0) {
setTimeout(() => {
this.setList();
}, 50)
}
},
},
computed: {},
};
</script>
<style scoped lang="scss">
.list {
display: flex;
justify-content: space-between;
.list_item {
flex: 1;
}
}
</style>
