# slot插槽 > 默認插槽的基本使用 ``` <pre class="calibre13">``` 自組件中使用插槽占位 <span class="token"><</span>solt<span class="token">></span><span class="token"><</span><span class="token">/</span>solt<span class="token">></span> 父組件 在自組件cpn <span class="token"><</span>cpn<span class="token">></span>替換插槽部分<span class="token"><</span>cpn<span class="token">></span> ``` ``` > 默認插槽的默認值 ``` <pre class="calibre13">``` <span class="token"><</span>solt<span class="token">></span><span class="token"><</span>button<span class="token">></span>默認按鈕<span class="token"><</span><span class="token">/</span>button<span class="token">></span><span class="token"><</span><span class="token">/</span>solt<span class="token">></span> 當不傳值的時候 默認按鈕就會顯示 ``` ``` > 具名插槽的使用 給插槽起名字 設置name的值 ``` <pre class="calibre13">``` 比如： 子組件cpn插槽 <span class="token"><</span>slot name <span class="token">=</span> <span class="token4">"left"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>slot<span class="token">></span> <span class="token"><</span>slot<span class="token">></span><span class="token"><</span><span class="token">/</span>slot<span class="token">></span> 我們只想替換左邊的插槽 父組件中可以使用 <span class="token"><</span>cpn<span class="token">></span><span class="token"><</span>span slot <span class="token">=</span> <span class="token4">"left"</span><span class="token">></span>標題<span class="token"><</span><span class="token">/</span>span<span class="token">></span><span class="token"><</span><span class="token">/</span>cpn<span class="token">></span> 那么只會替換左邊的插槽替換成標題 其他的插槽不會被替換 ``` ``` > # 作用域插槽 ***父組件替換插槽的標簽 但是內容由子組件來提供*** > 父組件替換插槽的標簽 但是內容由子組件來提供 > 應用場景：子組件包括一組數據 需要在多個界面進行展示： > 某些界面是以水平方向-展示的 > 某些界面是以列表形式展示的 > 某些界面直接展示一個數組 > **先要理編譯作用域** > 編譯作用域： > 在id為app的父組件中定義isshow = true 在cpn子組件中定義變量isshow = false > 在模版app中使用組件的時候 > 變量使用的是父組件的isshow = true。 所使用的變量都是用的對應id模板實例中的變量 > 詳細實例看碼云例子