vue元件中的插槽使用

vue 2.6.0之後採用全新v-slot語法取代之前的slot、slot-scope

插槽的目的是讓元件能後更好的進行擴充套件，使用起來更靈活

//comp

<
/div>
//parent
hello<
/comp>
/*渲染出來的結果為
hello
也就是將slot的標籤包括內容替換為指定的hello
*/

//comp

<
/slot>
<
/p>
"content"
>
<
/slot>
<
/span>
<
/div>
//parent
//注意：父元件中使用的子元件的插槽，其作用域為父元件，故該title會渲染成父元件中的title的值
data()
;}//預設插槽用default做引數
default
>具名插槽
}<
/template>
內容資訊<
/template>
<
/comp>
/* 渲染之後的為：
具名插槽標題
內容資訊
*/

當父元件中的使用到了子元件中的插槽，且需要顯示子元件的某個變數的值，可通過slot的值進行上下文物件的獲取

//comp

"foo"
>
<
/slot>
<
/div>
//parent
default
="ctx"
>內容顯示:子元件的foo資料為
}<
/template>
<
/comp>

vue 元件中solt 插槽使用

官方教程 如果現在事先模板中不知道需要什麼內容,需要在使用時傳遞 就可以使用插槽with來實現,這種效果 類似thinkphp中的模板繼承 的block標籤的功能 顧名思義就是沒有名字的插槽,匿名插槽只能有乙個 其他內容 匿名插槽 預設內容 其他內容 實名插槽可以有多個,在使用時必須使用name屬性...

vue元件及插槽的使用

父子元件是元件之間的一種關係，這個關係並不是絕對的，而是相對的。通常，如果在a元件中使用了b元件，那麼就稱a元件為b元件的子元件，相應地，b元件就稱為a元件的子元件。b div template 在工程化專案中，元件想要使用某一元件，有三個步驟 1 引入 2 註冊 3 使用 1 引入子元件 impo...

Vue元件插槽

三 具名插槽 命名插槽 補充當我們使用vue元件時，常常遇到子元件的部分布局在不同的路由元件上表現不同的情況，vue為了幫助我們開發者解決這個問題，新增了插槽這個功能 插槽即佔位符 實現元件在不同父元件中使用，內部可以有不一樣 塊 html 如下 示例 如下 示例 當乙個子元件內，需要多個插槽時，需...