Vue 插槽之插槽內容學習總結
阿新 • • 發佈:2021-03-13
## 插槽內容使用方法介紹
父元件中引用支援插槽內容的子元件,形如以下(假設子元件為`NavigationLink.vue`)
```html
Your Profile
```
然後在子元件`` 模板中使用` `,形如以下:
```vue
```
這樣以後,當元件渲染的時候,子元件中的` ` 將會被替換為父元件模板中,子元件起始標籤和結束標籤之間的內容--這裡稱之為“插槽內容”。
插槽內可以包含任何模板程式碼,包括 HTML:
```
Your Profile
```
甚至其它的元件:
```
Your Profile
```
如果子元件 `template` 中**沒有**包含一個 `` 元素,則父元件中,該元件起始標籤和結束標籤之間的任何內容都會被拋棄
## 應用舉例
## 需求描述
自定義卡片元件,用於展示不同的內容,形式為 顯示卡片標題和內容,卡片和卡片之間看起來需要有“分界條”
### `Testpage.vue`
```
hello
卡片內容
```
### `Card.vue`
元件路徑位於`@/components/Card/Card.vue`
```vue
{{title}}
```
### 效果
![](https://img2020.cnblogs.com/blog/1569452/202103/1569452-20210313104254173-1687893763.png)
## 參考連線
https://cn.vuejs.org/v2/guide/components-slots.html#%E6%8F%92%E6%A7%BD%E5%86%85%