XOOPS輕鬆架

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>

完整內容：