XOOPS輕鬆架

Vue.js 3.0 筆記
=============

1. 子組件：components/SlotTest.vue 
    ```markup
    <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. 父組件： 
    ```markup
    <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>`
 
完整內容：

書籍目錄

展開 | 闔起

快速登入

進階搜尋

計數器

今天：
昨天：
總計：

主內容區域

MarkDown

左邊區域內容

書籍目錄

快速登入

右邊區域內容

計數器

頁尾區域