1.什麼插槽
插槽也成為內容分發 用slot這個內建元件
2.插槽是幹什麼的
在子元件中來顯示父元件中的資料
3.插槽怎麼用
4.在子元件中用括起來乙個區域
5.在父元件的子元件標籤中給插槽傳遞資料,如果父元件不傳輸資料那6.麼直接顯示標籤中的資料
7.插槽的分類
插槽可以分為三類 預設插槽 具名插槽 作用域插槽
預設插槽
只要有位置 就會顯示父元件傳遞來的資料
具名插槽
給slot標籤起名 然後在父元件傳遞資料的時候根據名字查詢就行
示例:子元件
>
>
>
name
="one"
>
這個我子元件預留出來的位置
}slot
>
h2>
>
我的內容p
>
>
插槽的內容
name
="two"
>
slot
>
section
>
div>
template
>
>
export
default}}
script
>
父元件
>
>
>
v-slot:one
>
>
這是我的學生資料p
>
>
}h3>
template
>
>
這是列表的標題呢
template
>
list
>
>
list
>
div>
template
>
>
import list from
"@/components/list"
export
default
,data()
}}script
>
>
style
>
作用域插槽
1.在子元件中給slot繫結乙個屬性 掛載要傳輸的變數 :屬性名=「變數」
2.在父元件中通過 v-slot:名=「suibian」
3.suibian.屬性名來訪問子元件傳過來的資料
示例:子元件
>
>
>
name
="one"
:objuser
="obj"
>
}slot
>
h2>
>
我的內容p
>
>
插槽的內容
name
="two"
:stuobj
="stu"
>
slot
>
section
>
div>
template
>
>
export
default
, stu:}}
}script
>
父元件
>
>
>
v-slot:one
="suibian"
>
>
這是我的學生資料p
>
>
}h3>
template
>
v-slot:two
="suibian"
>
}template
>
list
>
>
list
>
div>
template
>
>
import list from
"@/components/list"
export
default
,data()
}}script
>
>
style
>
slot插槽以及具名插槽
今天剛入職新公司,看了新公司的專案 感覺和之前自己做的專案還是有差距的。自己之前做的專案相對於新公司來說可能還是偏淺,所以無論是框架還是原生的js都要去更加深入的了解才能應對之後的專案。都知道vue元件可以通過slot插槽插入自定義的資訊,但是往更加深入的slot了解的話會發現,slot插槽也有其他...
具名插槽和匿名插槽 vue 插槽
插槽就是子元件中的提供給父元件使用的乙個佔位符,用 表示,父元件可以在這個佔位符中填充任何模板 如 html 元件等,填充的內容會替換子元件的標籤。1.插槽 建立slots.vue 主檔案引入 原生效果 插槽效果。這樣在中間可以巢狀內容 這裡的內容會被插入到slots中顯示 我是插槽 2.預設插槽 ...
Slot 具名插槽的使用
在我們使用插槽的時候,可能裡面會有多個插槽,這個時候也可以定義多個插槽 比如在元件中定義三個插槽,而我只想把標題放在中間,只呼叫中間的插槽的話該怎麼辦。有的人可能會說直接引用不就好了,這種肯定不行,這樣三個都替換掉了。如下右邊的三個就可以看出來,要換的話就全部換掉了,達不到想要的結果 當我們想替換其...