1樓：軒爺
slot插槽，有具名插槽和普通插槽
插槽：如果元件A中存在 插槽，那麼 123 123就會吧 slot 代替掉，如果乙個元件中需要使用到多個插槽的話，那麼就需要使用到具名插槽了
具名插槽： 顧名思義就是帶有名字 name 的插槽，這樣能夠明確區分每乙個插槽
作用域插槽：元件A中存在 ，使用時： } 為了能夠訪問子元件的一些屬性
插槽主要是在定義一些公用元件或者做一些容器元件時會經常使用到Dialog 示例：
> ="dialog" > ="title" >提示div> ="content" > />div> name ="footer" > >取消button > >確定button >slot >div> div> > >這是彈窗內容< template v-slot ="footer" template >Dialog > 2樓：職座標 Slot就是在模板中提供給我們乙個可用的介面，我們可以在呼叫模板的時候，根據不同場景自己定義一些內容，擴充套件模板的可復用性。類似電腦的usb口我們在使用電腦的時候可以進行擴充套件，可以在usb口插u盤、滑鼠等。如下所示，定義了插槽，使用的時候，可以根據不同場景擴充套件。 使用起來比較方便，無需寫兩個模板。 您確認關閉嗎? lt;child-page> 這是乙個確認頁面 這是乙個關閉頁面 以上內容如果能幫到你，記得留下你的喜歡~ 3樓：Tianfan 函式A的閉包內，給函式B (子元件)，傳遞函式C ( html 片段，或者說是 dom 組成函式)。 以達到 C 擁有A 的作用域，同時擁有 B 傳入的參。 簡單說，就是給函式傳值，這個值是函式。 4樓：飛龍小院 slot 是什麼最好自己寫演示。我在codepen寫了給演示，形象。看看你能否懂了。然後你自己也嘗試寫乙個來。https:// codepen.io/252945027/pe n/bxXqqY 5樓：Houfeng 和 WebComponents 的 content 類似，和 http:// Asp.Net WebForm 中的 ItemTemplate 之類的也大體相似。 6樓： 有看到和函式及函式引數模擬的，覺得不能忍，雖然是很久之前的問題了，但文件還是那個文件，估計還會有人看完文件沒太理解吧。 正巧昨天寫了篇專欄，看完應該就能理解：從下拉列表元件開發理解 Slot 和 Scoped Slots。 tldr; Slot 是在元件模板中設定的用於在父元件中插入其孫子元件（即自身的子元件）或DOM片段的插槽。 Scoped Slots 允許在 Slots 中繫結當前元件的資料，然後經由父元件繫結到其孫子元件（即自身的子元件）的 Props 中傳遞給孫子元件（即自身的子元件），或繫結到DOM片段。 7樓：一葦杭之 其實就是提前佔坑， 這是slot_son default content 這是 slot_father 我是第乙個坑 我是第二個坑 比如要去吃飯了，兒子先去佔座，然後等他爹來了再一起吃！ 8樓： 就我個人而言，我完全是把vue作為web components的一種實現來用的。 上面是MDN上關於web components的說明。 注意其中shadow dom一節，slot就對應HTMLSlotElement。 這篇教程裡對slot element有更詳細的說明。 Slots are placeholders inside your component that users can fill with their own markup. 9樓： 看了上面的回答 slot就是 jinja2 或 nunjuncks裡面的 block啊只不過 1、使用的時候不需要引用 2、這個block是有預設的值的 10樓：張楷猴 正如 @許潛謀 所說的 就是函式的引數下面我來簡單解釋下 自定義乙個元件 varHelloWorld =Vue .extend ();對應的模版是(寫在HTML裡面的) 是不是跟下面的函式很類似呢？functionhelloWorld (hello ,world)$ `}2. 寫上父元件，為了簡單易懂我們讓它的父元件是bodyvar vm = new Vue( })3. 在父元件寫上你的自定義元件，其實就是去呼叫你的函式，並且傳引數給它，看對應的HTML hello world 其實就是相當於 varhello ='hello'; varworld ='world'; helloWorld (hello ,world );執行之後HTML結構是 h3> ="hello" >hello div> ="world" >world div> 11樓： Vue使用slot特性進行內容分發，我的理解是： 在父元件中放入已被 `slot` 標記的內容，這些內容的順序可以隨意。之後這些內容被分發到子元件的特殊元素 `slot` 中，根據 `name` 屬性在子元件中重新組合。需要注意的是，內容應該被放在父元件模板中的子元件中： ="parent-template" > > ="one" >one p> ="two" >two p> default p>child >div> 父元件模板中的內容被分發到子元件中重新組合，請看子元件的模板： h1> >預設分發處 slot > name ="two" >slot > name ="one" >slot >div> 初始化父元件例項之前要註冊子元件： // 註冊子元件 Vue. component ("child",); // 初始化父元件 newVue ();附： CodePen - Vue slot 12樓：MC成 最常見就是table元件。 多少列每列怎麼顯示？ 是可以通過引數配出來但是巨TM繁瑣 。 怎麼辦？！ slot！ 13樓：Jasin Yip 其實我覺得 slot 有點類似物件導向思想中的「多型」。 舉個例子，比如我要實現乙個這麼 Alert 元件： 它會有預設的內容和樣式，比如第一行的 Default 我們只需要使用< alert >alert >當我們想要有 Success、Warning、Error 等不同樣式和不同內容的 alert 時，我們會希望這樣使用： type ="success" > >Success! strong > Looks good to me! alert > type ="warning" > >Warning! strong > Something not good. alert > type ="error" > >Error! strong > Oooops... alert >要實現這個功能，我們就會用到slot。 >.Alert__close .Alert--Success .Alert--Warning .Alert--Error style > "alert-template" > ="alertClasses" v-show ="show" > > >Default! strong > Hello World~ slot > class ="Alert__close" @click ="show = false" >xspan >div> template > src= "./node_modules/vue/dist/vue.js" >script > >Vue. component ('alert',} },data :function(); }}); newVue ();script >就是外部呼叫時，標籤中的內容。如果外部呼叫時沒有提供內容的話，那麼它就會使用自己預設提供的內容，非常方便。 14樓：高晨 官方api說的slot是用於元件內容分發的，我的理解就是在元件化開發中，雖然元件是一樣的，但是在不同的使用場景元件的一部分內容需要有不同的內容顯示，而這個slot就好比元件開發時定義的乙個引數（通過name值來區分），如果你不傳入就當預設值使用，如果你傳入了新的值，那麼在元件呼叫時就會替換你定義的slot的預設值。 以上是我的理解，可能不太準確，做個參考。具體你可以參考官網示例中的模態元件，這個例子就用到slot。 暱 痕 v if route.meta.keepAlive router view keep alive v if route.meta.keepAlive router view 然後在設定路由資訊的時候這樣 這個是需要keepalive的 這是不會被keepalive的 暮靄 銷毀沒研究，非同步... 把你寫的 VUE 元件，包括標籤 可以放到中 註冊元件的方法 僅在元件裡使用的CSS，分離到乙個新的html去就行，然後通過AJAX 如jQuery的load 載入到頁面的乙個隱藏標籤中去。你就是得自己控制一下元件的載入順序就是了。可能除錯會有些麻煩，你可以在原來的頁面上自己測試好了再分離過去。如果... 顧軼靈 首先，test case 不能只看乙個瀏覽器的結果，而且還取決於呼叫時的引數是什麼。其次，對於這個問題，原生 bind 在現代瀏覽器上的速度的確是更快的。可以看下下面這個 issue Bind implementation is slower when native in modern br...hello World
內容被分發且重新組合
Vue js中如何動態的載入 解除安裝元件？
vue js的單檔案元件可以直接瀏覽器載入嗎？
vuejs中實現bind函式的效能更好嗎？