一般來(lái)說(shuō)父組件只能復(fù)用子組件但是沒(méi)辦法改變子組件的內(nèi)容和樣式 總之就是 你可以用我但是不可以改變我

創(chuàng)新互聯(lián)公司是專業(yè)的興賓網(wǎng)站建設(shè)公司，興賓接單;提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行興賓網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

就像買車一樣 不能自己去決定車的配置、外觀、性能、尺寸，這些都是廠家自己設(shè)計(jì)好然后批量生產(chǎn)的 大家買下都是一樣的

而插槽的出現(xiàn)就提供了父組件可以改造子組件的能力 相當(dāng)于你對(duì)自己的車實(shí)現(xiàn)了私人訂制

Vue中插槽分為三種 下面我以車比作子組件來(lái)解析

1.具名插槽（側(cè)重于改變子組件內(nèi)容）

在子組件template屬性中添加多個(gè)slot標(biāo)簽 而這個(gè)slot標(biāo)簽都各自帶有自己的name屬性 屬性值都不一樣

<slot name="AAA"></slot>
<slot name="BBB"></slot>
<slot name="CCC"></slot>

父組件可以對(duì)應(yīng)不同的name值 把相對(duì)應(yīng)的內(nèi)容 插入到各自slot標(biāo)簽里
slot標(biāo)簽內(nèi)可以包裹任意原子組件的內(nèi)容 插入的內(nèi)容將會(huì)替換掉它

（就像在車上不同的位置對(duì)應(yīng)加裝不同的配件）

2、默認(rèn)插槽（側(cè)重于改變子組件內(nèi)容）

在子組件template屬性中添加一個(gè)slot標(biāo)簽 而這個(gè)slot標(biāo)簽不帶name屬性

<slot></slot>

父組件里任何內(nèi)容都默認(rèn)加到這個(gè)slot標(biāo)簽里
slot標(biāo)簽內(nèi)可以包裹任意原子組件的內(nèi)容 插入的內(nèi)容將會(huì)替換掉它

（就像在車上默認(rèn)只在車頂這一個(gè)地方加裝行李架 所有配件都是放到車頂做行李架的）

3、作用域插槽（側(cè)重于改變子組件樣式）

父組件復(fù)用子組件的時(shí)候 對(duì)某一個(gè)子組件內(nèi)容樣式不滿意 此時(shí)在 子組件內(nèi)你希望改變的那部分內(nèi)容外 包裹一個(gè)slot標(biāo)簽 給slot自定義一個(gè)屬性<slot :data="xxx"></slot>（名稱自己起）父組件模板定義一個(gè)slot-scope="slot"屬性 模板內(nèi)通過(guò)slot.xxx可以拿到子組件的數(shù)據(jù) 拿到數(shù)據(jù)后就好辦了 可以任你蹂躪了 你想把它弄成什么樣就弄成什么樣
父組件改變了子組件的樣式 但是內(nèi)容還是子組件的

<div id="app">
<child>
<template slot-scope="slot"> //Vue2.5.xxx版本以下只能用template模板 以上可以自定義
<span v-for="item in slot.data"></span>
</template>
</child>
</div>

<template id="child">
<div>
<slot :data="listData">
<ul>
<li v-for="item in listData">{{item}}</li>
</ul>
</slot>
</div>
</template>

（就像是你對(duì)車身顏色不滿意 你把灰色改成了白色但是車還是原來(lái)的車）

組件的插槽是為了讓我們封裝的組件更加具有擴(kuò)展性。我們?cè)诼飞峡吹降募漳榴R人基本上絕大多數(shù)都是被改裝過(guò)的，有的改裝過(guò)后更加的好看，有的更加霸氣，有的攀爬能力大大提高， 牧馬人之所以可以輕易被改裝，就是因?yàn)樗焐脑揭盎蚝透难b潛力，我們?cè)诜庋b組件的時(shí)候也是也是一樣的，要盡可能地預(yù)備插槽，提升組件的“改裝潛力”，比如移動(dòng)網(wǎng)站的導(dǎo)航欄，移動(dòng)開(kāi)發(fā)中幾乎每個(gè)頁(yè)面都有導(dǎo)航欄，但是每個(gè)頁(yè)面的導(dǎo)航欄都是一樣的嗎？NO! 導(dǎo)航欄我們必然要封裝成一個(gè)插件，比如nav-bar組件，一旦有了這個(gè)組件，我們就可以在多個(gè)頁(yè)面進(jìn)行復(fù)用了。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文名稱：Vue為什么要有插槽-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://chinadenli.net/article34/cdpjse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、云服務(wù)器、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)