> 作者： 小土豆 > 部落格園：[https://www.cnblogs.com/HouJiao/](https://www.cnblogs.com/HouJiao/) > 掘金：[https://juejin.im/user/2436173500265335](https://juejin.im/user/2436173500265335) ## 什麼是插槽 在日常的專案開發中，當我們在編寫一個完整的元件時，不可避免的會引用一些`外部元件`或者`自定義元件`。  有了這種`引用關係`之後，我們就可以把它們稱為`父元件`或者`子元件`，同時`父子元件`之間有很多的通訊方式，比如可以通過`props`向`子元件`傳遞資料，或者通過`$emit`、`$parent`呼叫`父元件`中的方法。 下面就是一個非常簡單的`父元件`引用`子元件`的例子。 ```html ```` 接著我們在`App`元件中引用`Child`元件。 ```html ``` 最後執行專案，`子元件`的內容成功被引用並展示在頁面上。  那假如我們現在有這樣一個需求：在引用`Child`元件的同時，希望在`Child`元件的`指定位置`插入一段內容：`

歡迎大家關注小土豆

`。 如果我們直接將內容寫入``內部，是不會生效的。 ```html ``` 可以看到並未達到預期效果：  那為了解決類似這樣的問題，`Vue`就設計出來了`slot`這個東西。`slot`翻譯過來叫做`插槽`，也可稱其為`Vue`的內容分發機制，它的主要作用就是向`子元件`的`指定位置`插入一段內容，這個內容可以是`HTML`或者`其他的元件`。 ## 預設插槽 在前面一節內容裡，我們提出了一個需求：在引用`Child`元件的同時，希望在`Child`元件的`指定位置`插入一段內容：`

歡迎大家關注小土豆

`。 那這個需求如何使用`插槽`來實現呢？我們來實踐一下。 首先我們需要在`子元件`中寫入``，同時這個在``標籤內部可以有預設的內容，比如`我是這個slot裡面本來的內容` ```html ``` 接著就是在`父元件`中傳入我們希望插入到`子元件`中的內容。 ```html ``` 此時在執行專案，就能看到`

歡迎大家關注小土豆

`這段內容已經成功的顯示在頁面上。  ## 具名插槽 `具名插槽`就是給我們的`插槽`起一個名字，即給``定義一個`name`屬性。 ```html ``` 給`插槽`起了名稱以後，我們在`父元件`中就可以使用`v-slot:name`或者`#name`往指定的`插槽`填充內容。 > `#name` 是`v-slot:name`的簡寫形式 下面我們就來實踐一下`具名插槽`。 首先是在`子元件（Child.vue）`中定義`具名插槽`。 ```html ``` 接著在`父元件（App.vue）`中使用。 ```html ``` 執行專案就能看到對應的內容被插入到對應的插槽內：  ### 補充內容——預設插槽的`name`屬性 其實關於前面的`預設插槽`它也是有`name`屬性的，其值為`default`，所以在`父元件`中也可以這樣寫： ```html ``` ### 補充內容——`