vue 插槽solt的使用

1.什麼是插槽？

插槽就是子元件中的提供給父元件使用的乙個佔位符，用 表示，父元件可以在這個佔位符中填充任何模板**，如 html、元件等，填充的內容會替換子元件的標籤。

2.插槽使用場景

比如有五個頁面，這五個頁面只有某個區域的內容不一樣，複製貼上是一種辦法，但在vue中，插槽（solt）更好的做法。

3.插槽分類

1)預設插槽：預設插槽就是指沒有名字的插槽，子元件未定義的名字的插槽，父級將會把 未指定插槽的填充的內容填充到預設插槽中。

父元件：

<

template
>
<
div>
<
solt-child 
title
="預設插槽"
>
<
template
><
span
>預設插槽測試
span
>
template
>
solt-child
>
div>
template
>
<
script
>
import soltchild from 
"./soltchild.vue
"export 
default
}script
>

<

template
>
<
div>
<
span 
style
="color:red"
>}
span
>
<
slot
>
slot
>
div>
template
>
<
script
>
export 
default
script
>

2）具名插槽：就是給插槽娶個名字。乙個子元件可以放多個插槽，而且可以放在不同的地方，而父元件填充內容時，可以根據這個名字把內容填充到對應插槽中。

注：v-solt只能在template標籤內使用（2.6.0版本以後才有v-solt），也可用solt,在普通html標籤內使用，用法：右邊

父元件：

<

template
>
<
div>
<
solt-child 
title
="具名插槽"
>
<
template 
v-slot:right
>
右邊            
template
>
<
template 
v-slot:left
>
左邊            
template
>
solt-child
>
div>
template
>
<
script
>
import soltchild from 
"./soltchild.vue
"export 
default
}script
>

<

template
>
<
div>
<
slot 
name
="left"
>
slot
>
<
span 
style
="color:red"
>}
span
>
<
slot 
name
="right"
>
slot
>
div>
template
>
<
script
>
export 
default
script
>

3）作用域插槽：作用域插槽其實就是帶資料的插槽，即帶引數的插槽，簡單的來說就是子元件提供給父元件的引數，該引數僅限於插槽中使用，父元件可根據子元件傳過來的插槽資料來進行不同的方式展現和填充插槽內容。

使用場景：如果子元件中的某一部分的資料，每個父元件都會有自己的一套對該資料的不同的呈現方式，這時就需要用到作用域插槽。

父元件：

<

template
>
<
div>
<
solt-child 
title
="作用域插槽"
>
<
template 
v-slot:down
="soltprops"
>
}            
template
>
solt-child
>
div>
template
>
<
script
>
import soltchild from 
"./soltchild.vue
"export 
default
}script
>

<

template
>
<
div>
<
span 
style
="color:red"
>}
span
>
<
div>
<
slot 
name
="down"
:user
="user"
>
slot
>
div>
div>
template
>
<
script
>
export 
default}}
}script
>

vue 元件中solt 插槽使用

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

vue插槽使用

1.2插槽 ps 僅供本人記憶 1.2.1為什麼要使用插槽？插槽可以使元件更具備擴充套件性！vue插槽文件 1.2.2插槽的基本使用 給子元件定義乙個插槽 slot元素 父元件在使用子元件時，填充子元件的插槽。在子元件標籤中編寫的html內容，會替換掉子元件的slot元素 可以給中設定預設要展示的內...

vue插槽的使用

什麼是插槽？插槽 slot 是 vue 提出來的乙個概念，正如名字一樣，插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，且具有模組化的特質和更大的重要性，插槽顯不顯示 怎樣顯示是由父元件來控制的，而插槽在 顯示就由子元件來進行控制 用 slot 元素將不同的dom 樹組合在一起，s...