:::

8-2 slot 用法

  1. 子組件:components/SlotTest.vue
    <script>
    export default {
      setup() {
        return {};
      },
    };
    </script>
    
    <template>
      <div class="alert">
        <slot>我是預設內容</slot>
      </div>
    </template>
    
    <style lang="scss" scoped>
    .alert {
      padding: 10px;
      margin: 10px;
      background: rgb(179, 228, 230);
      border: 1px solid rgb(51, 158, 161);
    }
    </style>
    1. 將預設內容用<slot></slot>包起來,未來要替換用的,也就是做成一個插槽
  2. 父組件:
    <script>
    import SlotTest from "@/components/SlotTest.vue";
    
    export default {
      components: {
        SlotTest,
      },
      setup() {
        return {};
      },
    };
    </script>
    
    <template>
      <slot-test>我是插槽1</slot-test>
      <slot-test>插槽2在這裡</slot-test>
      <slot-test>插槽3不一樣</slot-test>
    </template>
    
    <style></style>
    
  3. 使用插槽時,<SlotTest />要改成<slot-test>欲插入內容</slot-test>

完整內容:


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1744

計數器

今天: 1305130513051305
昨天: 3438343834383438
總計: 7391634739163473916347391634739163473916347391634