Vue.js中使用插槽將數據從父組件傳遞到子組件的方法

這篇文章將為大家詳細講解有關Vue.js中使用插槽將數據從父組件傳遞到子組件的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

這篇文章適合所有階段的開發人員（包括初學者）。

在你開始之前

您的計算機上將需要以下內容：

• 已安裝Node.js版本10.x及更高版本。 您可以通過在終端/命令提示符中運行以下命令來驗證版本：node -v

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

• Vue的最新版本，已全局安裝在您的計算機上

• 您的計算機上已安裝Vue CLI 3.0。 為此，請先卸載舊的CLI版本：

npm uninstall -g vue-cli

然后，安裝新的：

npm install -g @ vue / cli

• 在此處下載Vue入門項目

• 解壓下載的項目

• 導航到解壓縮的文件并運行命令以使所有依賴項保持最新：

npm install

什么是Vue插槽？

Vue插槽是Vue團隊創建的Vue模板元素，旨在為模板內容分發提供平臺。 它是受Web組件規范草案啟發的內容分發API的實現。 使用Vue插槽，您可以在項目中的各個組件之間傳遞或分發HTML代碼。

為什么Vue插槽很重要？

內容分布很重要，原因有很多，其中一些與結構有關。使用vue插槽，可以構造一個html接口（類似于typescript），然后可以將其用作通過模板注入構建組件的指南。它是一個非常可伸縮和高效的解決方案，可以將模板代碼從一個組件傳遞到另一個組件。

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

插槽與道具

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

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

Vue插槽語法

對于插槽，您的子組件充當您希望如何安排內容的接口或結構。可能是這樣的：

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

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

<Test>
   <h3>Hello World!</h3>
 </Test>

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

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

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

演示

如果您從一開始就關注這篇文章，那么您將在vs代碼中打開vue starter項目。為了演示語法部分中的簡單示例，我們的父組件將是app.vue文件。打開app.vue文件并在此代碼塊中復制：

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

子組件將成為測試組件，因此請在test.vue文件中復制下面的代碼塊：

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

使用以下命令在開發環境中運行應用程序：

npm run serve

命名插槽

Vue允許一個組件有多個插槽，這意味著您可以擁有任意數量的插槽。要測試此功能，請將此新代碼塊復制到test.vue文件中：

<template>
  <div>
    <slot></slot>
    <slot></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元素的槽名來標記這些HTML元素。將此復制到app.vue文件的模板部分：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test>
      <h3 slot="header">Hello world!</h3>
      <p slot="paragraph">Hello, I am a paragraph text</p>
      <ul slot="links">
        <li>Hello, I am a list item</li>
        <li>Hello, I am a list item</li>
      </ul>
    </Test>
  </div>
</template>

v-castle語法

當VUE版本2.6發布時，它附帶了一個更好的語法來引用名為v-slot的子組件中的插槽名稱，這意味著要替換初始的插槽語法。因此，與其使用這樣的槽來替代父組件模板：

<Test>
   <h2 slot="header">Hello world!</h2>
</Test>

從3.0版開始，它現在將如下所示：

<Test v-slot:header>
   <h2>Hello world!</h2>
</Test>

注意，除了字符串從slot到v-slot的細微變化外，還有一個重大變化：v-slot只能在模板上定義，而不能在任何html元素上定義。這是一個很大的變化，因為它質疑命名插槽的可用性，但截至本文撰寫之時，插槽仍然是文檔的很大一部分。

作用域插槽

設想一個場景，其中Vue插槽還可以從父組件訪問子組件中的數據對象，這是一種具有道具功能的插槽。要說明這一點，請繼續，通過將下面的代碼塊復制到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="Vue logo" src="./assets/logo.png">
    <Test v-slot="{team}">
      <h3>Hello world! my team is {{team}}</h3>
    </Test>
  </div>
</template>

如果運行應用程序，您將看到數據對象已成功傳遞到父組件。

關于Vue.js中使用插槽將數據從父組件傳遞到子組件的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。