插槽的解釋

插槽的概念： 插槽的關鍵字slot，預設情況下，元件中的模闆會覆寫元件中的原始内容（即自定義标簽對内部的内容會不顯示），解決辦法就是使用插槽。

元件的原始内容： 即在vue執行個體範圍之内，是以可以調用執行個體的data和methods

插槽共分為3中：

插槽的結構：

匿名插槽：<slot></slot>

具名插槽：<slot name=top></slot>

作用域插槽:<slot title='标題'  :num=count></slot>

1. 匿名插槽

匿名插槽的作用： 保留元件中的所有原始标簽内容，這種插槽被稱為匿名插槽

直接在元件中寫上slot标簽對，就可以在根元素中的引用的元件中間顯示所寫的内容

2. 具名插槽

凡是具有name屬性的slot标簽，就被稱為具名插槽即<slot name=top>(在子元件中寫，寫的位置不同，在引用該模闆的頁面中顯示的位置也會不一樣)。

作用：

1. 在元件的原始内容的某個标簽中，添加slot=top屬性，指明該标簽所對應的插槽的名稱

2. 在元件模闆中通過調用slot标簽，兵設定name=top屬性，會自動将對應的标簽内容添加至目前slot标簽所在的位置

注意：原始内容凡是具有slot屬性的标簽，内容隻能添加至元件模闆中具有相同值的name屬性的slot标簽中

匿名插槽的作用： 保留了原始資料，除了具名插槽标簽中的内容，即凡是标簽中具有slot=top的屬性标簽

3. 作用域插槽

在元件的原始内容中，通過slot-scope屬性接受作用域插槽傳遞的值，即obj={title：‘标題’，num：19}

作用域插槽:将元件模闆中的資料傳遞給元件的原始内容

1. 在slot開始标簽中，添加要傳遞的資料，避開name屬性（具名插槽）

2. 在原始内容中通過slot-scope屬性（其值是自定義的）接受傳遞的資料，即slot-scope=varName(本質是個對象，存儲傳遞的資料，即資料會自動轉換成鍵值對，存儲在這個對象裡，是以屬性名對應屬性名，屬性值對應屬性值）