第六节：作用域插槽 和 动态插槽

作用域插槽

• 把子组件里面的数据返回给父组件接收,好方便处理
• 示例
  • 默认的插槽可以不使用 template 和 default

<template>
  <div>
    <ul>
      <li v-for="item of picList" :key="item.id">
        <div class="box">
          <h1>{{ item.title }}</h1>
          <!-- 作用域插槽传数据 -->
          <slot :item="item"></slot>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyUiIndex',

  data() {
    return {
      picList: [
        {
          id: 1,
          title: '阿迪斯发士大夫撒大苏打发',
          desc: `新的征程上，继续推进马克思主义中国化时代化，坚定志不改、道不变的决心`,
          url: '没办法通过不了,脑补链接'
        },
        {
          id: 2,
          title: '甘南草原，灿若格桑',
          desc: `绿色发展之问的答案在草原回响坐落在青藏高原与黄土高原的过渡地带这里既是国家生态安全的“绿色长城”`,
          url: '没办法通过不了'
        },
        {
          id: 3,
          title: '一个人的成功除了靠自己的勤奋努力外，谦虚谨慎是不可缺少的品格',
          desc: `一个人的成功除了靠自己的勤奋努力外，谦虚谨慎是不可缺少的品格一个人的成功除了靠自己的勤奋努力外，谦虚谨慎是不可缺少的品格。自以为是的人永远也找不到成功的门路。`,
          url: '没办法通过不了'
        }
      ]
    };
  }
};
</script>

<style scoped>
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box {
  width: 60%;
  margin: 0 auto;
  overflow: hidden;
}
</style>

<template>
  <div class="home">
    <PicBoard>
      <!-- 获取数据,解构出来数据 -->
      <template v-slot:default="{item}">
        <img :src="item.url" :alt="item.desc" />
        <p>{{ item.desc }}</p>
      </template>
    </PicBoard>
    <!-- 
    默认的插槽可以不使用 template 和 default
    <PicBoard v-slot="{item}">
      <img :src="item.url" :alt="item.desc" />
      <p>{{ item.desc }}</p>
    </PicBoard> -->
  </div>
</template>

<script>
import PicBoard from './components/PicBoard/index.vue'
export default {
  name: 'Home',
  components: {
    PicBoard
  }
}
</script>

<style scoped>
img {
  float: left;
  width: 200px;
  margin-right: 20px;
}
</style>

动态插槽

• 场景使用很少了解就行了，是一种解决方案，也许以后遇到刁钻的奇怪用得到

<template>
  <div>
    <slot name="slot1">
      <div style="color: aqua;">111</div>
    </slot>
    <slot name="slot2">
      <div style="color: greenyellow;">222</div>
    </slot>
    <slot name="slot3">
      <div style="color: pink;">333</div>
    </slot>
    <slot name="slot4">
      <div style="color: rebeccapurple;">444</div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'MyUiMyslot'
};
</script>

<template>
  <div class="home">
    <my-slot>
      <template v-slot:[slotName]>
        <h1>This is {{ slotName }}</h1>
      </template>
    </my-slot>
    <button @click="changeSlot">change~slot</button>
  </div>
</template>

<script>
import MySlot from "./components/PicBoard/MySlot.vue"
export default {
  name: 'Home',
  components: {
    MySlot
  },
  data() {
    return {
      slotName: 'slot2',
      index: 2
    }
  },
  methods: {
    changeSlot() {
      this.index++;
      if(this.index > 4) {
        this.index = 1;
      }
      switch(this.index) {
        case 1:
          this.slotName = 'slot1';
          break;
        case 2:
          this.slotName = 'slot2';
          break;
        case 3:
          this.slotName = 'slot3';
          break;
        case 4:
          this.slotName = 'slot4';
          break;
        default:
          this.slotName = 'slot1';
          break;
      }
    }
  }
}
</script>