slot怎么在vue項(xiàng)目中使用？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

大箐山網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)從2013年開始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

什么是插槽？

插槽（Slot）是Vue提出來的一個(gè)概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個(gè)位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性。插槽顯不顯示、怎樣顯示是由父組件來控制的，而插槽在哪里顯示就由子組件來進(jìn)行控制

Vue slot 原理

在web-components中有slot的概念，https://developers.google.com/web/fundamentals/web-components/shadowdom。

元素

Shadow DOM 使用 元素將不同的 DOM 樹組合在一起。Slot 是組件內(nèi)部的占位符，用戶可以使用自己的標(biāo)記來填充。

通過定義一個(gè)或多個(gè) slot，您可將外部標(biāo)記引入到組件的 shadow DOM 中進(jìn)行渲染。 這相當(dāng)于您在說“在此處渲染用戶的標(biāo)記”。

注：Slot 是為網(wǎng)絡(luò)組件創(chuàng)建“聲明性 API”的一種方法。它們混入到用戶的 DOM 中，幫助對整個(gè)組件進(jìn)行渲染，從而將不同的 DOM 樹組合在一起。

怎么用插槽？

默認(rèn)插槽

父組件

在父組件引用的子組件中寫入想要顯示的內(nèi)容（可以使用標(biāo)簽，也可以不用）

子組件(slotOne1)

在子組件中寫入slot，slot所在的位置就是父組件要顯示的內(nèi)容

當(dāng)然再父組件引用的子組件中也可以寫入其他組件

父組件

子組件(slotOne2)

具名插槽

子組件

在子組件中定義了三個(gè)slot標(biāo)簽，其中有兩個(gè)分別添加了name屬性header和footer

父組件

  我是name為footer的slot