Vue插槽slot的用法

2.6.0中，使用v-slot（以前具名插槽：slot，作用域插槽：slot-scope）。

用法一 插槽內容—template

核心：承載元件的分發內容。

// 定義，在 的模板中

// 呼叫，呼叫對應的元件
your profile
// 渲染結果
your profile

// 定義，在 的render函式中

render: function (createelement) 
// 呼叫，呼叫對應的元件
同上// 渲染結果
同上

核心：插槽可以設定預設內容

// 定義

submit
// 呼叫
// 渲染結果
submit

核心：插槽內容與插槽通過名稱一一對應

// 定義

// 呼叫
a paragraph for the main content.
and another one.
here's some contact info
// 渲染結果
a paragraph for the main content.
and another one.
here's some contact info

核心：父元件中插槽內容呼叫子元件中資料，處理後在插槽中渲染內容。

// 定義，其中user為該current-user元件的乙個例項屬性user:}  

// 呼叫} 
// 渲染結果
xing

核心：vm.$scopedslots等於 < slot > 標籤

// 定義，子元件

vue.component('child', )
])// `
` }
});// 呼叫，父元件
import child from './child.vue';
vue.component('parent', ,
render: function (createelement) }})
])/*}*/
}});
// 渲染結果
scopedslots 測試

核心：for迴圈中每一項都有各自的不同的插槽內容。

// 定義

// 呼叫
✓ }
// 渲染結果
/* 假設 todos=[
, ]*/

vue插槽slot的用法

插槽就是子元件提供給父元件的乙個佔位符，當父元件使用子元件需要填充一些 片段或者內容的時候可以使用slot進行佔位填充。父元件中的內容就會將子元件中的slot替換。在父元件中使用子元件時，可能有不止乙個地方使用插槽，這個時候就要使用具名插槽。如果不帶名稱的話，就不知道對應的是哪個地方。當同一些資料需...

Vue 特性插槽slot 用法總結

vue的一些特性和方法學習，說一千道一萬不如乙個例子帶來的直觀，下面就是乙個完整的例子來總結 slot各種型別的插槽用法 關於slot這個特性，理解起來要注意幾點 1 slot這個特性設計的目的就是讓子元件能非常方便在父元件上進行擴充套件，子元件的最終頁面呈現極大程度依然于父元件下面的模板如何寫。2...

slot插槽的用法

1.基本用法父頁面向子元件裡插入的標籤 一般情況下,插入單個 my name is tom p child div vue.component child let vm newvue 2.具名用法父頁面向子元件裡插入多個標籤 header 這是頭部 div footer 這是腳部 div conte...