這篇文章給大家介紹一下如何使用Vue插槽在Vue.js中將數(shù)據(jù)從父組件傳遞到子組件。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

這篇文章適合所有階段的開(kāi)發(fā)人員（包括初學(xué)者）。

在你開(kāi)始之前

您的計(jì)算機(jī)上將需要以下內(nèi)容：

• 已安裝Node.js版本10.x及更高版本。 您可以通過(guò)在終端/命令提示符中運(yùn)行以下命令來(lái)驗(yàn)證版本：node -v

• 代碼編輯器； 推薦Visual Studio Code

• Vue的最新版本，已全局安裝在您的計(jì)算機(jī)上

• 您的計(jì)算機(jī)上已安裝Vue CLI 3.0。 為此，請(qǐng)先卸載舊的CLI版本：

npm uninstall -g vue-cli

然后，安裝新的：

npm install -g @ vue / cli

• 在此處下載Vue入門項(xiàng)目

• 解壓下載的項(xiàng)目

• 導(dǎo)航到解壓縮的文件并運(yùn)行命令以使所有依賴項(xiàng)保持最新：

npm install

什么是Vue插槽？

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

為什么Vue插槽很重要？

內(nèi)容分布很重要，原因有很多，其中一些與結(jié)構(gòu)有關(guān)。使用vue插槽，可以構(gòu)造一個(gè)html接口（類似于typescript），然后可以將其用作通過(guò)模板注入構(gòu)建組件的指南。它是一個(gè)非?？缮炜s和高效的解決方案，可以將模板代碼從一個(gè)組件傳遞到另一個(gè)組件。

內(nèi)容定位是Vue插槽的另一個(gè)很好的用例。您只需創(chuàng)建一個(gè)模板，然后使用另一個(gè)組件或父組件按照您希望模板顯示在用戶界面中的方式排列該模板。

插槽與道具

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

props處理在組件之間傳遞數(shù)據(jù)對(duì)象，而slot處理在組件之間傳遞模板（html）內(nèi)容。但是，作用域插槽的行為與道具完全一樣；這將在本教程中清楚地說(shuō)明。

Vue插槽語(yǔ)法

對(duì)于插槽，您的子組件充當(dāng)您希望如何安排內(nèi)容的接口或結(jié)構(gòu)?？赡苁沁@樣的：

<template>   <div>     <slot></slot>   </div> </template>

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

<Test>    <h2>Hello World!</h2>  </Test>

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

<template>   <div>     <h2>Hello World!</h2>   </div> </template>

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

演示

如果您從一開(kāi)始就關(guān)注這篇文章，那么您將在vs代碼中打開(kāi)vue starter項(xiàng)目。為了演示語(yǔ)法部分中的簡(jiǎn)單示例，我們的父組件將是app.vue文件。打開(kāi)app.vue文件并在此代碼塊中復(fù)制：

<template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png">     <Test>       <h2>Hello World!</h2>     </Test>   </div> </template> <script> import Test from './components/Test.vue' export default {   name: 'app',   components: {     Test   } } </script>

子組件將成為測(cè)試組件，因此請(qǐng)?jiān)?code>test.vue文件中復(fù)制下面的代碼塊：

<template>   <div>     <slot></slot>   </div> </template> <script> export default {   name: 'Test' } </script>

使用以下命令在開(kāi)發(fā)環(huán)境中運(yùn)行應(yīng)用程序：

npm run serve

命名插槽

Vue允許一個(gè)組件有多個(gè)插槽，這意味著您可以擁有任意數(shù)量的插槽。要測(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被打印了三次。因此，如果您想添加