在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傳...