Vue中組件要如何接收模板內(nèi)容？

在某些場景中，我們可能想要為子組件傳遞一些模板片段，讓子組件在它們的組件中渲染這些片段。

舉例來說，這里有一個(gè)?<FancyButton>?組件，可以像這樣使用：

<FancyButton>

?Click me! <!-- 插槽內(nèi)容 -->

</FancyButton>

而?<FancyButton>?的模板是這樣的：

<button class="fancy-btn">

?<slot></slot> <!-- 插槽出口 -->

</button>

<slot>?元素是一個(gè)插槽出口?(slot outlet)，標(biāo)示了父元素提供的插槽內(nèi)容?(slot content) 將在哪里被渲染。

最終渲染出的 DOM 是這樣：

<button class="fancy-btn">Click me!</button>

通過使用插槽，<FancyButton>?僅負(fù)責(zé)渲染外層的?<button>?(以及相應(yīng)的樣式)，而其內(nèi)部的內(nèi)容由父組件提供。

理解插槽的另一種方式是和下面的 JavaScript 函數(shù)作類比，其概念是類似的：

// 父元素傳入插槽內(nèi)容

FancyButton('Click me!')

// FancyButton 在自己的模板中渲染插槽內(nèi)容

function FancyButton(slotContent) {

?return `<button class="fancy-btn">

???${slotContent}

??</button>`

}

插槽內(nèi)容可以是任意合法的模板內(nèi)容，不局限于文本。例如我們可以傳入多個(gè)元素，甚至是組件：

<FancyButton>

<span style="color:red">Click me!</span>

<AwesomeIcon name="plus" />

</FancyButton>

通過使用插槽，<FancyButton>?組件更加靈活和具有可復(fù)用性。現(xiàn)在組件可以用在不同的地方渲染各異的內(nèi)容，但同時(shí)還保證都具有相同的樣式。

Vue 組件的插槽機(jī)制是受原生 Web Component?<slot>?元素的啟發(fā)而誕生，同時(shí)還做了一些功能拓展，這些拓展的功能我們后面會學(xué)習(xí)到。

作用域插槽：

插槽內(nèi)容可以訪問到父組件的數(shù)據(jù)作用域，因?yàn)椴宀蹆?nèi)容本身是在父組件模板中定義的。舉例來說：

<span>{{ message }}</span>

<FancyButton>{{ message }}</FancyButton>

這里的兩個(gè)?{{ message }}?插值表達(dá)式渲染的內(nèi)容都是一樣的。

插槽內(nèi)容無法訪問子組件的數(shù)據(jù)。Vue 模板中的表達(dá)式只能訪問其定義時(shí)所處的作用域，這和 JavaScript 的詞法作用域規(guī)則是一致的。換言之：

父組件模板中的表達(dá)式只能訪問父組件的作用域；子組件模板中的表達(dá)式只能訪問子組件的作用域。