vue 插槽 slot

插槽使用

普通插槽

<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>