在Vue中使用插槽

2022-08-31 16:30:27 字數 794 閱讀 5460

在vue中使用插槽

元件的template裡可以在任意位置新增,slot為標籤,稱為插槽,像是乙個藉口,接受html資料。

具名插槽,slot標籤可以新增name屬性,用與區分元件中不同插槽

預設值這樣在呼叫元件時就可以在innerhtml裡寫入對應的html資料

這樣就會把這個標籤下的,包括這個標籤,所有html元素替換到的位置,本質和v-html沒什麼區別。

<

body

>

<

div

id="root"

>

<

child

content

="dell"

>

child

>

<

child

content

="lee"

>

child

>

div>

<

script

>

vue.prototype.bus

=new

vue()

vue.component(

'child',

},props:,

template:'}

',methods:

},mounted:

function

()) }

})varvm

=new

vue()

script

>

body

>

在Vue中使用插槽(slot)

什麼是插槽 顧名思義,乙個蘿蔔乙個坑。子元件建立的標籤插入的內容不會在瀏覽器顯示。這時需要用到vue新的語法slot。vue為什麼要用插槽 元件標籤是元件定義好的內容,當我們想在元件標籤內放一些東西的時候。是不具有作用的。他不會顯示。hello 瀏覽器中不會顯示hello。dom結構中也沒有div ...

Vue學習小札 2 7 在Vue中使用插槽

通過插槽可以更方便得向子元件新增dom元素 dell vue.component child 複製 顯示就是父元件向子元件新增得dell 也可以給定義預設值,當父元件沒有給子元件新增插槽時顯示。預設內容 複製 具名插槽 header slot header header footer slot fo...

在 Vue 中是使用插槽

先寫一段簡單的 dell vue.component child template hello let vm new vue 這種寫法有兩個問題 p標籤外面會有一層div,這個div是無法去掉的,有人會想,能不能用template代替,其實是不可以的,在這裡模版站位符是不能用的。如果content傳...