033.Vue3入門，多個插槽Slot的命名呼叫和#號簡寫

像一棵海草海草海草發表於2024-08-11
Vue

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、效果如下：

相關文章