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

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

站在用戶的角度思考問題，與客戶深入溝通，找到懷仁網(wǎng)站設計與懷仁網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設計制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務覆蓋懷仁地區(qū)。

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

在你開始之前

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

已安裝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團隊創(chuàng)建的Vue模板元素，旨在為模板內(nèi)容分發(fā)提供平臺。它是受Web組件規(guī)范草案啟發(fā)的內(nèi)容分發(fā)API的實現(xiàn)。使用Vue插槽，您可以在項目中的各個組件之間傳遞或分發(fā)HTML代碼。

為什么Vue插槽很重要？

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

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

插槽與道具

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

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

Vue插槽語法

對于插槽，您的子組件充當您希望如何安排內(nèi)容的接口或結構?？赡苁沁@樣的：

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

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

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

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

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

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

演示

如果您從一開始就關注這篇文章，那么您將在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>

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

npm run serve

命名插槽

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

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

如果運行應用程序，可以看到hello world被打印了三次。因此，如果您想添加更多的內(nèi)容（例如，一個標題、一個帶有文本的段落，然后是一個無序的列表），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>

現(xiàn)在，還必須根據(jù)要在其中顯示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發(fā)布時，它附帶了一個更好的語法來引用名為v-slot的子組件中的插槽名稱，這意味著要替換初始的插槽語法。因此，與其使用這樣的槽來替代父組件模板：

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

從3.0版開始，它現(xiàn)在將如下所示：

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

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

作用域插槽

設想一個場景，其中Vue插槽還可以從父組件訪問子組件中的數(shù)據(jù)對象，這是一種具有道具功能的插槽。要說明這一點，請繼續(xù)，通過將下面的代碼塊復制到test.vue文件中，在子組件中創(chuàng)建一個數(shù)據(jù)對象：

<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指令用于將數(shù)據(jù)中的團隊與父組件中的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>

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

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

分享名稱：Vue.js中使用插槽將數(shù)據(jù)從父組件傳遞到子組件的方法
網(wǎng)頁URL：http://muchs.cn/article8/ihgjop.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、用戶體驗、域名注冊、云服務器、App設計、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容