vue插槽的使用

什麼是插槽？

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

用 < slot > 元素將不同的dom 樹組合在一起，slot 是元件內部的佔位符，使用者可以使用自己的標記來填充

插槽內容可以使任意內容

>

<
/child>
<
/div>
vue.
component
('child',)
var vm =
newvue(}
)

< child >你好< /child > 元件中加上你好，需要在宣告的地方加上乙個< slot >< /slot >插槽

>

你好<
/child>
<
/div>
vue.
component
('child',)
var vm =
newvue(}
)

頁面顯示內容 hello world! 你好

插槽就是vue實現的一套內容分發的api，將< slot >< /slot >元素作為承載分發內容的出口

這句話的意思就是，沒有插槽的情況下再元件標籤內寫一些內容是不起任何作用的，當在元件中宣告了slot元素後，在元件元素內寫的內容才會展示出來

具名插槽，就是給這個插槽起個名字

在元件中，給插槽起個名字，乙個名字是girl，乙個名字是boy，還有乙個不起名字

然後再 < child >< /child >內，slot屬性對應的內容都會在元件中name一一對應

沒有名字的插槽就是預設插槽

>

"girl"
>
漂亮、美麗、購物、逛街
<
/template>
"boy"
>
帥氣、誠實
<
/template>
我是另一類人
我是預設的插槽
<
/div>
<
/child>
<
/div>
vue.
component
('child',)
var vm =
newvue(}
)<
/script>

我們可以把元件上的屬性/值，在元件元素上使用

>

"a">
}<
/template>
<
/child>
<
/div>
vue.
component
('child',)
let vm =
newvue(}
)<
/script>

我們把a展示出來發現是 ，也就是slot上面的屬性和值組成的鍵值對，這就是作用域插槽

>

'namelist'
>
"a">
}<
/template>
<
/child>
<
/div>
vue.
component
('child',)
let vm =
newvue(,
,,,,
]}})
<
/script>

vue插槽使用

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

vue插槽的使用

父元件 父元件 呼叫子元件 color red 我預設插槽內容 p slotone1 div 子元件 vue.component soltonel 乙個元件中只能有乙個預設插槽。相對應的，具名插槽就可以有很多個，只要名字 name屬性 不同就可以了 父元件 父元件 呼叫子元件 footer styl...

Vue 插槽的使用

專案中具名插槽使用的較多。封裝的通用提示元件，如 上圖截的是登出提示，有的時候不同的情況下提示元件的提示內容不一樣，這就要根據具體情況更改 元件中的text內容 首先父元件使用prompt子元件 在向具名插槽提供內容的時候，我們可以在乙個元素上使用v slot指令，並以v slot的引數的形式提供其...