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

2021-10-16 08:14:40 字數 692 閱讀 7205

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

1.插槽

//建立slots.vue

主檔案引入//原生效果

////插槽效果。這樣在中間可以巢狀內容

//這裡的內容會被插入到slots中顯示

我是插槽

2.預設插槽

如果主頁面不傳值就會顯示插槽預設值,如果主頁面傳值就會顯示主頁面的值。

插槽預設值

我是插槽

3.具名插槽

實現載入的時候載入到不同位置,通過不同位置來標識是哪個div。這個時候就需要把每乙個結構指定乙個名稱。優點就是通過名字和不同的結構進行匹配,預設插槽只能匹配乙個結構。

主頁面傳遞

頭部身體

底部

slots頁面顯示

我是分割線 

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

單個插槽 匿名插槽 1.1 子元件定義為 1.2 父元件向一下這樣使用子元件 your profile 1.3渲染出來的 html 將會是 your profile 需要多個插槽時,可以利用元素的乙個特殊的特性 name來定義具名插槽2.1子元件模板定義 2.2.1父元件使用子元件,節點上使用slo...

vue中匿名插槽,具名插槽和作用域插槽例子

子元件中要直接展示父元件傳遞過來的dom內容 root 子元件 header slot header header div 需要向子元件傳遞的dom footer slot footer footer div 需要向子元件傳遞的dom body content div vue.component b...

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

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