怎么通過Vue插槽的組件傳遞HTML內(nèi)容

這篇文章主要介紹“怎么通過Vue插槽的組件傳遞HTML內(nèi)容”，在日常操作中，相信很多人在怎么通過Vue插槽的組件傳遞HTML內(nèi)容問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么通過Vue插槽的組件傳遞HTML內(nèi)容”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

什么是Vue插槽？

　　Vue插槽是由Vue團(tuán)隊(duì)創(chuàng)建的Vue模板元素，用于提供模板內(nèi)容分發(fā)的平臺(tái)。它是受Web Components 規(guī)范草案啟發(fā)的內(nèi)容分發(fā)API的實(shí)現(xiàn)。使用Vue插槽，您可以跨項(xiàng)目中的各個(gè)組件傳遞或分發(fā)HTML代碼。

　　內(nèi)容分發(fā)很重要，原因很多，其中一些原因與結(jié)構(gòu)有關(guān)。使用Vue插槽，您可以構(gòu)建HTML界面（與TypeScript一樣），然后您可以將其用作通過模板注入構(gòu)建組件的指南。它是一種可擴(kuò)展且高效的解決方案，用于將模板代碼從一個(gè)組件傳遞到另一個(gè)組件。

　　內(nèi)容的定位是Vue插槽的另一個(gè)重要用例。您可以只創(chuàng)建一個(gè)模板，然后使用另一個(gè)組件或父組件來排列該模板，就像您希望它出現(xiàn)在用戶界面中一樣。

　　如果您了解Vue插槽，您可能想知道道具和插槽是否做同樣的事情。那么，這些工具或平臺(tái)的核心思想是鼓勵(lì)資源的可重用性和效率?？紤]到這一點(diǎn)，插槽和道具是相似的。

　　道具處理從組件到組件傳遞數(shù)據(jù)對(duì)象，但插槽處理傳遞模板（HTML）內(nèi)容而不是組件。但是，范圍內(nèi)的插槽就像道具一樣; 這將在本教程中清楚地說明。

Vue插槽語法

　　對(duì)于插槽，您的子組件充當(dāng)您希望如何安排內(nèi)容的界面或結(jié)構(gòu)。它看起來像這樣：

<template>

<div>

<slot></slot>

</div>

</ template>

父組件（要注入子組件的HTML內(nèi)容所在的位置）可能如下所示：

<Test>

   <h3>Hello World!</h3>

 </Test>

此組合將返回如下所示的用戶界面：

<template>

<div>

<h3> Hello World！</h3>

</div>

</template>

請(qǐng)注意它自己的插槽如何作為內(nèi)容注入位置和方式的指南 - 這是中心思想。

命名插槽

　　Vue允許組件有多個(gè)插槽，這意味著您可以擁有任意數(shù)量的插槽。要對(duì)此進(jìn)行測(cè)試，請(qǐng)將此新代碼塊復(fù)制到您的文件中：test.vue

<template>

<div>

<slot></slot>

<slot></slot>

<slot></slot>

</div>

</template>

<script>

export default { name：'Test' }

</script>  

　　如果運(yùn)行該應(yīng)用程序，則可以看到hello world打印三次。因此，如果您想添加更多內(nèi)容 - 比如標(biāo)題，帶有文本的段落，然后是無序列表 - Vue允許我們命名范圍，以便它可以標(biāo)識(shí)要顯示的特定范圍。命名文件中的插槽將如下所示：test.vue

<template>

< div >

<slot name = “header”> </slot>

<slot name = “paragraph”></slot>

<slot name = “l(fā)inks”> </slot>

</div>

</template>

<script>

export default { name：'Test' }

</script>

　　現(xiàn)在，您還必須根據(jù)要在其中顯示它們的插槽名稱來標(biāo)記HTML元素。將其復(fù)制到文件的模板部分：app.vue

<template>

<div id = ‘a(chǎn)pp’>

<img alt = ‘Vue’ src = ‘./ assets / logo.png’>

   <Test>

<h3 slot = “header”> Hello world</h3>

    <p slot = “paragraph”>我是段落文本</p>

<ul slot = “l(fā)inks”>

<li>您好，我是一個(gè)列表項(xiàng)</li>

</ul>

</Test>

</div>

</template> 

V-slots語法

當(dāng)Vue版本2.6發(fā)布時(shí)，它提供了更好的語法來引用名為v-slot的子組件中的插槽名稱，這意味著要替換初始插槽語法。所以，而不是像這樣的插槽的父組件模板：

<Test>

< h2 slot = “header”> Hello world！</ h2 >

</ Test >

從版本3.0（應(yīng)該在年底之前發(fā)布），現(xiàn)在看起來像這樣：

<test v-slot：header >

< h2 > Hello world！</h2>

</Test>

注意從字符串中的微小的變化是，除了slot對(duì)，還有一個(gè)重大變化：V型槽只能在模板，而不是任何HTML元素來定義。這是一個(gè)很大的變化，因?yàn)樗|(zhì)疑命名槽的可用性，但在撰寫本文時(shí)，插槽仍然是文檔的一部分。v-slot

Scoped插槽

想象一下這樣一種場(chǎng)景，其中Vue槽也可以從父組件訪問子組件中的數(shù)據(jù)對(duì)象 - 一種具有props能力的槽。為了說明這一點(diǎn)，請(qǐng)通過將下面的代碼塊復(fù)制到文件中來繼續(xù)在子組件中創(chuàng)建數(shù)據(jù)對(duì)象：test.vue

<template>

<div>

<slot v-bind:team = “team”></slot>

<slot name = “paragraph”></slot>

<slot name = “l(fā)inks”></slot>

</div>

</template>

<script>

export default { name：'Test'，

data (){

return { team：“FC Barcelona” }

   }

}

</script>

就像普通的props一樣，v-bind指令用于將數(shù)據(jù)中的團(tuán)隊(duì)與父組件中的prop引用綁定。打開文件并將下面的代碼塊復(fù)制到模板部分：app.vue

<template>

<div id = “app”>

<img alt = “l(fā)ogo” src = “./assets/ logo.png” >

<Test v-slot = “{team}”>

<h3> Hello {{team}} </ h3>

</Test>

</div>

</template>

如果運(yùn)行應(yīng)用程序，您將看到數(shù)據(jù)對(duì)象已成功傳遞給父組件。

到此，關(guān)于“怎么通過Vue插槽的組件傳遞HTML內(nèi)容”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！