我們知道，組件之間是允許相互嵌套的，比如我們要做一個按鈕組，按鈕是按鈕組里面一個較小的單元，那么外層需要一個容器包裹，如果我們想要把外層容器也抽象成一個單元的話（可配置的），那么外層容器里面的內容被渲染成頁面元素的時候，就會被干掉了，但是有了slot就不怕了。 ~~~ // 父組件模版（ButtonGroup） <template> <div class="qc-btn-group"> <slot></slot> </div> </template> <script> </script> // 子組件模版（Button） <template> <button :type="htmlType" class="qc-btn" :disabled="disabled"> <Icon class="load" type="loading" v-if="loading"></Icon> <span v-if="showSlot" ref="slot"><slot></slot></span> </button> </template> // 可以看到按鈕里面還可以嵌套slot，來顯示用戶在按鈕里面自定義的內容，這大大提升了組件的可擴展性 ~~~ 使用： ~~~ // 如果沒有slot，Button就會被干掉了。 <ButtonGroup> <Button></Button> </ButtonGroup> ~~~