033.Vue3入门，多个插槽Slot的命名调用和#号简写

1、App.vue代码如下：

<template>
  <div>
    <h3>插槽学习</h3>
    <Slot001>
      <!--    插槽1-->
      <template v-slot:s2>
        <p>{{ msg1 }}</p>
      </template>
      <!--    插槽2-->
      <template #s1>
        <p>{{ msg2 }}</p>
      </template>
    </Slot001>
  </div>
</template>

<script>
import Slot001 from './view/Slot001.vue'

export default {
  data() {
    return {
      msg1: '我需要插槽1',
      msg2: '我需要插槽2'
    }
  },
  components: {
    Slot001
  }
}
</script>

2、Slot001.vue代码如下：

<template>
  <h3>我是插槽页面</h3>
  <slot name="s1">默认1</slot>
  <a href="#">插槽内容</a>
  <slot name="s2">默认2</slot>
</template>

<script>
export default {
  data() {
    return {
    }
  }
}
</script>

3、效果如下：