元件 插槽 匿名插槽 具名插槽

2022-05-23 20:00:09 字數 904 閱讀 1998

單個插槽|匿名插槽

1.1  子元件定義為:

1.2  父元件向一下這樣使用子元件


your profile
1.3渲染出來的 html 將會是：

your profile
需要多個插槽時，可以利用元素的乙個特殊的特性：name來定義具名插槽2.1子元件模板定義：
2.2.1父元件使用子元件，節點上使用slot特性：

a paragraph for the main content.


and another one.


here's some contact info
2.2.2也可在內容外層套乙個節點，並在外層節點上使用slot特性：

a paragraph for the main content.


and another one.


here's some contact info
2.3渲染出來的 html 都將會是：

a paragraph for the main content.


and another one.


here's some contact info
單個插槽和具名插槽中插槽上不繫結資料，所以父元件提供的模板既要包括樣式又要包括資料，而作用域插槽是子元件提供資料，父元件只需要提供一套樣式

3.1子元件：

// 作用域插槽


export default }}
3.2父元件：

}


}我就是模板

具名插槽和匿名插槽 vue 插槽

插槽就是子元件中的提供給父元件使用的乙個佔位符，用 表示，父元件可以在這個佔位符中填充任何模板 如 html 元件等，填充的內容會替換子元件的標籤。1.插槽 建立slots.vue 主檔案引入 原生效果 插槽效果。這樣在中間可以巢狀內容 這裡的內容會被插入到slots中顯示 我是插槽 2.預設插槽 ...

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

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

插槽 具名插槽 作用域插槽

一 插槽 當子元件的有一部分內容是根據父元件傳過來的dom顯示的時候,可以使用插槽 通過插槽，父元件向子元件優雅的傳遞dom結構，同時子元件使用插槽的內容，通過 body well 二 具名插槽 slot header header slot footer footer 三 作用域插槽 作用域插槽 ...