好程式設計師web前端分享透過Vue插槽的元件傳遞HTML內容

　　好程式設計師 web前端分享 透過 Vue插槽的元件傳遞HTML內容 ， 本文將向您介紹如何使用 Vue插槽將資料從父元件傳遞到Vue.js中的子元件。這篇文章適合所有階段的開發人員 - 包括初學者 - 儘管在完成本教程之前還有一些先決條件。

您的機器上需要以下內容：

·  已安裝 Node.j s 。 您可以透過在終端 /命令提示符中執行此命令來驗證您的版本： node -v

·  程式碼編輯器 ; 我強烈推薦Visual Studio Code （個人感覺）

·  Vue的最新版本，全域性安裝在您的機器上

·  您的計算機上安裝了 Vue -cli 。為此，請先解除安裝舊的 vue-cli 版本： npm uninstall -g vue-cli

·  然後，安裝新的：   npm install -g @vue/cli

·  V ue 官網上有完整的教程

什麼是 Vue插槽？

　　 Vue插槽是由Vue團隊建立的Vue模板元素，用於提供模板內容分發的平臺。 它是受 Web Components 規範草案 啟發的內容分發 API的實現。使用Vue插槽，您可以跨專案中的各個元件傳遞或分發HTML程式碼。

　　 內容分發很重要，原因很多，其中一些原因與結構有關。 使用 Vue插槽，您可以構建HTML介面（與TypeScript一樣），然後您可以將其用作透過模板注入構建元件的指南。它是一種可擴充套件且高效的解決方案，用於將模板程式碼從一個元件傳遞到另一個元件。

　　 內容的定位是 Vue插槽的另一個重要用例。 您可以只建立一個模板，然後使用另一個元件或父元件來排列該模板，就像您希望它出現在使用者介面中一樣。

　　 如果您瞭解 Vue插槽，您可能想知道道具和插槽是否做同樣的事情。那麼，這些工具或平臺的核心思想是鼓勵資源的可重用性和效率。考慮到這一點，插槽和道具是相似的。

　　 道具處理從元件到元件傳遞資料物件，但插槽處理傳遞模板（ HTML）內容而不是元件。但是，範圍內的插槽就像道具一樣; 這將在本教程中清楚地說明。

Vue插槽語法

　　 對於插槽，您的子元件充當您希望如何安排內容的介面或結構。 它看起來像這樣：

<template>

<div>

<slot></slot>

</div>

</ template>

父元件（要注入子元件的 HTML內容所在的位置）可能如下所示：

<Test>

    <h2> Hello World! </h2>

  </Test>

此組合將返回如下所示的使用者介面：

<template>

<div>

<h2>  Hello World！ </h2>

</div>

</template>

  

    

  

請注意它自己的插槽如何作為內容注入位置和方式的指南 - 這是中心思想。

命名插槽

　　 Vue允許元件有多個插槽，這意味著您可以擁有任意數量的插槽。 要對此進行測試，請將此新程式碼塊複製到您的檔案中： test .vue

<template>

<div>

<slot></slot>

< s lot></slot>

<slot></slot>

</div>

</template>

<script>

export default  { name ： 'Test'  }

</script>   

　　 如果執行該應用程式，則可以看到 hello world列印三次。 因此，如果您想新增更多內容 - 比如標題，帶有文字的段落，然後是無序列表 - Vue允許我們命名範圍，以便它可以標識要顯示的特定範圍。命名檔案中的插槽將如下所示： test .vue

<template>

< div >

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

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

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

</div>

</template>

<script>

export default  { name ： 'Test'  }

</script>

　　 現在，您還必須根據要在其中顯示它們的插槽名稱來標記 HTML元素。 將其複製到檔案的模板部分： app .vue

<template>

<div id = ‘ app ’ >

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

    <Test>

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

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

<ul slot = “links” >

<li> 您好，我是一個列表項 </li>

</ul>

</Test>

</div>

</template>  

V-slots語法

當 Vue版本2.6釋出時，它提供了更好的語法來引用名為v-slot的子元件中的插槽名稱，這意味著要替換初始插槽語法。所以，而不是像這樣的插槽的父元件模板：

<Test>

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

</ Test >

從版本 3.0（應該在年底之前釋出），現在看起來像這樣：

< test v-slot：heade r  >

< h1 >  Hello world！ </h1>

</Test>

注意從字串中的微小的變化是，除了 slot 對，還有一個重大變化： V型槽只能在模板，而不是任何HTML元素來定義。這是一個很大的變化，因為它質疑命名槽的可用性，但在撰寫本文時，插槽仍然是文件的一部分。 v-slot

Scoped插槽

想象一下這樣一種場景，其中 Vue槽也可以從父元件訪問子元件中的資料物件 - 一種具有props能力的槽。為了說明這一點，請透過將下面的程式碼塊複製到檔案中來繼續在子元件中建立資料物件： test.vue

<template>

<div>

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

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

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

</div>

</template>

<script>

export default  { name ： 'Test' ，

data () {

return  {   team ： “FC Barcelona”  }

    }

}

</script>

就像普通的 props一樣，v-bind指令用於將資料中的團隊與父元件中的prop引用繫結。開啟檔案並將下面的程式碼塊複製到模板部分： app.vue

<template>

<div id = “app” >

<img alt = “logo” src = “ . /assets/ logo.png”  >

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

<h2>  Hello {{team}} </ h2>

</Test>

</div>

</template>

如果執行應用程式，您將看到資料物件已成功傳遞給父元件。

　　 介紹了 Vue.js中的插槽以及它們對內容注入的重要性。您瞭解它，甚至如何為元件設定多個插槽。您還看到了插槽如何透過作用域來充當道具 。