vue 學(xué)習(xí)記錄之slot分發(fā)內(nèi)容

slot分發(fā)內(nèi)容

不具名slot用來(lái)備用插入,子組件只有不具名的slot時(shí)候,父組件才回調(diào)用slot內(nèi)容,如果子組件有其他內(nèi)容,父組件的內(nèi)容會(huì)替換掉slot內(nèi)容,slot內(nèi)容不顯示。

子組件:
<div>
<h2>我是子組件的標(biāo)題</h2>
<slot>
  只有在沒(méi)有要分發(fā)的內(nèi)容時(shí)才會(huì)顯示。
</slot>
</div>
父組件模版:
<div>
  <h1>我是父組件的標(biāo)題</h1>
  <my-component>
    <p>這是一些初始內(nèi)容</p>
    <p>這是更多的初始內(nèi)容</p>
  </my-component>
</div>
  
渲染結(jié)果:
<div>
  <h1>我是父組件的標(biāo)題</h1>
  <div>
    <h2>我是子組件的標(biāo)題</h2>
    <p>這是一些初始內(nèi)容</p>
    <p>這是更多的初始內(nèi)容</p>
  </div>
</div>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 此文基于官方文檔,里面部分例子有改動(dòng),加上了一些自己的理解 什么是組件? 組件(Component)是 Vue.j...
    陸志均閱讀 3,944評(píng)論 5 14
  • 本文為轉(zhuǎn)載,原文:Vue學(xué)習(xí)筆記入門(mén)篇——組件的內(nèi)容分發(fā)(slot) 介紹 為了讓組件可以組合,我們需要一種方式來(lái)...
    ChainZhang閱讀 3,337評(píng)論 2 11
  • Vue筆記系列1、Vue.js入門(mén)3、Vue.js進(jìn)階 API 以下會(huì)隨用隨記一些API,可能會(huì)不定期更新。 Vu...
    其心閱讀 2,131評(píng)論 0 10
  • 什么是組件 組件(Component)是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素,封裝可重用...
    angelwgh閱讀 818評(píng)論 0 0
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,361評(píng)論 0 6

友情鏈接更多精彩內(nèi)容