vue 组件设置多个插槽

定义

<slot name="title"></slot>

使用

<div slot="title" class="downx">
</div>

使用

<template>
  <div class="shebeiyichang">
    <titlecom>
      <img slot="title" class="w84" src="../../../assets/title_ccyl.png" alt="">
      <div slot="paixu" class="downx">
        <img @click="show=true" class="down cur" src="../../../assets/icon_jt_down.png" alt="">
        <img @click="show=false" class="down cur" src="../../../assets/icon_jt_up.png" alt="">
      </div>
    </titlecom>
  </div>
</template>

<script>
import titlecom from "@/components/home/titlecom";
export default {
  name: "shebeiyichang",
  components: { titlecom},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.shebeiyichang {
  position: relative;
  width: 100%;
  height: calc(38% - 80px);
  margin-bottom: 40px;
  padding-bottom: 35px;
}
</style>

组件

<template>
  <div class="titles">
    <img class="zjt" src="../../assets/icon_zuojiantou.png" alt="">
    <div class="img">
      <slot name="title"></slot>
    </div>
    <img class="zjt" src="../../assets/icon_youjiantou.png" alt="">
    <slot name="paixu">
    </slot>
  </div>
</template>

<script>

export default {
  name: "titlecom",
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    },
    showdown: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      status: ''
    }
  },
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.titles {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 220px;
  padding-top: 40px;
  position: relative;
  margin: auto;
  margin-bottom: 20px;

  .zjt {
    width: 19px;
  }

  .img {
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
  }
}

.downx {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  position: absolute;
  right: 0;

  .down {
    width: 12px;
    margin-left: 3px;
    margin-right: 3px;
  }
}
</style>