032.Vue3入門，插槽Slot的作用域和預設內容

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

1、App.vue程式碼如下：

<template>
  <div>
    <h3>插槽學習</h3>
    <!--    插槽1-->
    <Slot001>
      <p>{{ msg }}</p>
    </Slot001>
    <!--    插槽2-->
    <Slot001>
      <!--      <p>{{ msg }}</p>-->
    </Slot001>
  </div>
</template>

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

export default {
  data() {
    return {
      msg: '我是父頁面標籤'
    }
  },
  components: {
    Slot001
  }
}
</script>

2、Slot001.vue程式碼如下：

<template>
  <h3>我是Slot001</h3>
  <slot>aa</slot>
</template>
<script>
export default {
  data() {
    return {
      msg: '我是子頁面標籤'
    }
  }
}
</script>

3、效果如下:

相關文章