22 VUE 插槽 詳解

一直對插槽不理解，今天學習，並整理一下，希望日後可以靈活運用。

先簡單來個例子，看一下插槽的租作用。

<

div 
id>
<
h1>這是父元件：}
h1>
<
child-component
>你好
child-component
>
div>

<

div>
<
h2>這是子元件，child-component
h2>
div>

你好

vue 實現了一套內容分發的 api，這套 api 的設計靈感源自 web components 規範草案，將元素作為承載分發內容的出口。當元件渲染的時候，將會被替換為「你好」。插槽內可以包含任何模板**，包括 html

父元件：

<

div 
id>
<
h1>這是父元件：}
h1>
<
child-component
>
<
span
>slot 測試
span
>
child-component
>
div>

後備內容，即為沒有為插槽設定任何內容時，顯示的預設內容。

沒有為插槽設定任何內容

<

div 
id>
<
h1>這是父元件：}
h1>
<
child-component
>
child-component
>
div>

<

div>
<
h2>這是子元件，child-component
h2>
<
slot
>
<
span
>這是後備內容
但是如果設定插槽，後備內容則不會顯示。
有的時候，我們需要多個插槽，例如：
<

div 
id>
<
h1 style
="text-align: center"
>這是父元件：}
h1>
<
child-component
>
<
template 
v-slot:header
>
<
h3 style
="text-align: center;color: blue"
>這是header部分
h3>
template
>
<
p style
="color: blueviolet;text-align: center"
>這是主題部分
p>
<
template 
v-slot:fooder
>
<
h3 style
="text-align: center;color: aqua"
>這是fooder部分
h3>
template
>
child-component
>
div>

<

div>
<
h2 style
="text-align: center"
>這是子元件，child-component
h2>
<
slot 
name
="header"
>
slot
>
<
slot
>
slot
>
<
slot 
name
="footer"
>
slot
>
div>
父元件中插槽中，可以取到子元件中資料。

在v-slot新增元素上的特性被稱為插槽 prop
<

div 
id>
<
h2 >這是父元件！
h2>
<
child-slot
>
<
template 
v-slot:default
="user"
>
<
p>父元件中，取子元件中的值：}
p>
template
>
child-slot
>
div>
在中，繫結資料v-bind:user="user"

<

div>
<
h2>這是子元件
當子元件中，只提供預設插槽時，元件的標籤才可以被當作插槽的模板來使用。這樣我們就可以把v-slot直接用在元件上：
<

child-slot
>
<
template 
v-slot:default
="user"
>
<
p>父元件中，取子元件中的值：}
p>
template
>
child-slot
>
也可以，簡寫為：

<

child-slot
>
<
template 
v-slot
="user"
>
<
p>父元件中，取子元件中的值：}
p>
template
>
child-slot
>
 
2 2 vue環境搭建以及vue cli使用
用腳手架建立模板，只需要寫 而不用關注太多 通過cnpm去run dev 或者 build 會在後台開乙個shell視窗 先把需要的依賴 npm install 都安裝上然後再執行專案 ps vue配置資訊 1.bulid 配置檔案所在的資料夾 bulid內的config檔案是webpack的配置 ...
Vue 插槽詳解
vue插槽，是學習vue中必不可少的一節，當初剛接觸vue的時候，對這些掌握的一知半解，特別是作用域插槽一直沒明白。後面越來越發現插槽的好用。分享一下插槽的一些知識吧。分一下幾點 1 插槽內可以放置什麼內容？2 預設插槽 3 具名插槽 4 作用域插槽 一 插槽內容 一句話 插槽內可以是任意內容。先看...
vue插槽（slot）詳解
最近被問起是否了解vue的插槽 slot 咋一想發現，似乎很少用到這玩意。所以整理了下slot的一些用法。vue 實現了一套內容分發的 api，將元素作為承載分發內容的出口，這是vue文件上的說明。具體來說，slot就是可以讓你在元件內新增內容的 空間 舉個例子 子元件 假設名為 ebutton 父...