插槽 具名插槽 作用域插槽

一、插槽

當子元件的有一部分內容是根據父元件傳過來的dom顯示的時候,可以使用插槽

通過插槽，父元件向子元件優雅的傳遞dom結構，同時子元件使用插槽的內容，通過

body>

well

二、具名插槽

slot="header">header

slot="footer">footer

三、作用域插槽

作用域插槽：每一項顯示什麼就不是由子元件決定了，而是父元件調子元件的時候給子元件重遞對應的模板，

作用域插槽必須是template開頭和結尾的乙個內容，同時插槽要用v-slot宣告要從子元件接收的資料放到**，同時要告訴子元件乙個模板資訊，你接收到的內容應該怎麼展示

v-slot="props"> //
v-slot宣告要從子元件接收的資料放到props裡
}-hello // 告訴子元件乙個模板資訊，接收到的內容應通過li標籤的形式展示
>

Vue 插槽 具名插槽 作用域插槽 其他

自 2.6.0 起有所更新。已廢棄的使用 slot 特性的語法在這裡。有時我們需要多個插槽。例如對於乙個帶有如下模板的 元件 此元件中的插槽為非具名插槽 對於這樣的情況，元素有乙個特殊的特性 name。這個特性可以用來定義額外的插槽 對非具名插槽進行修改完善，成為以下的具名插槽，下面的 為乙個元件 ...

Vue中的插槽 具名插槽 作用域插槽

1 vue中插槽的作用和使用方法 定義乙個名cmpone子元件，為該子元件新增內容應該在子元件的template中定義，直接在父元件的標籤中裡定義的內容不會被渲染，如下例 使用插槽後渲染的內容span cmp one div const cmpone const vm newvue script 結...

v slot匿名插槽 具名插槽及作用域插槽

說起上slot插槽啊，還是在學習vue的時候了解的她。說白了就是佔位，資料整合分發，那今天好好了解下插槽的幾種形式 只要是沒有具體分配的內容，都會給到匿名插槽或者 同時在子元件中需替換為用於佔位，即在modal元件中自定義的內容都會顯示在slot佔位的位置 定義元件 vue.component mo...