這篇文章主要介紹Vue.js特性Scoped Slots的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司專注于陵川網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供陵川營(yíng)銷型網(wǎng)站建設(shè)，陵川網(wǎng)站制作、陵川網(wǎng)頁(yè)設(shè)計(jì)、陵川網(wǎng)站官網(wǎng)定制、小程序設(shè)計(jì)服務(wù)，打造陵川網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供陵川網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

什么是scoped slots

A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.

上面是官方的定義。

作用域插槽（Scoped Slots）是vue.js中一個(gè)非常有用的特性，它可以使組件更加通用和復(fù)用。唯一的問(wèn)題是理解起來(lái)比較困難。試圖去讓你理解父與子作用域的交織關(guān)系，像解決一道數(shù)學(xué)難題。

簡(jiǎn)單點(diǎn)說(shuō)slot就是插槽，它是可以被替換掉的，替換它的內(nèi)容是可以拿到當(dāng)前組件的上下文的

舉個(gè)簡(jiǎn)單的例子

//button.vue

//app.vue

slot其實(shí)就是一個(gè)占位，button.vue的slot位置會(huì)被app.vue里面的替換了。

復(fù)雜例子1：slot內(nèi)的東西可以獲取父組件的上下文信息

//list.vue

//app.vue

解釋見(jiàn)上面代碼注釋。注意一點(diǎn)的是slot-scope=”row” 這里的名字(row)是可以任意取的。

named slots

可以直接放到普通標(biāo)簽上面，可以放template標(biāo)簽上

slot里面的作用域是普通標(biāo)簽或者template是一致的。不能訪問(wèn)父組件的作用域。

復(fù)雜例子2：slot里面是可以放東西的，是默認(rèn)的模板，可被替換。

//table.vue

//app.vue


 //這里替換table.vue里面slot為row的內(nèi)部?jī)?nèi)容
 
  {{row.title}}