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

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

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

在你開始之前

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

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

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

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

• 您的計(jì)算機(jī)上已安裝Vue CLI 3.0。 為此，請先卸載舊的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ā)提供平臺。 它是受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），然后可以將其用作通過模板注入構(gòu)建組件的指南。它是一個(gè)非?？缮炜s和高效的解決方案，可以將模板代碼從一個(gè)組件傳遞到另一個(gè)組件。

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

插槽與道具

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

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

Vue插槽語法

對于插槽，您的子組件充當(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>

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

演示

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

<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>

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

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

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

npm run serve

命名插槽

Vue允許一個(gè)組件有多個(gè)插槽，這意味著您可以擁有任意數(shù)量的插槽。要測試此功能，請將此新代碼塊復(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)容（例如，一個(gè)標(biāo)題、一個(gè)帶有文本的段落，然后是一個(gè)無序的列表），vue允許我們命名作用域，以便它可以標(biāo)識要顯示的特定作用域。在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元素的槽名來標(biāo)記這些HTML元素。將此復(fù)制到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語法

當(dāng)VUE版本2.6發(fā)布時(shí)，它附帶了一個(gè)更好的語法來引用名為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的細(xì)微變化外，還有一個(gè)重大變化：v-slot只能在模板上定義，而不能在任何html元素上定義。這是一個(gè)很大的變化，因?yàn)樗|(zhì)疑命名插槽的可用性，但截至本文撰寫之時(shí)，插槽仍然是文檔的很大一部分。

作用域插槽

設(shè)想一個(gè)場景，其中Vue插槽還可以從父組件訪問子組件中的數(shù)據(jù)對象，這是一種具有道具功能的插槽。要說明這一點(diǎn)，請繼續(xù)，通過將下面的代碼塊復(fù)制到test.vue文件中，在子組件中創(chuàng)建一個(gè)數(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ù)中的團(tuán)隊(duì)與父組件中的prop引用綁定。打開app.vue文件并將下面的代碼塊復(fù)制到模板部分：

<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>

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

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

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

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

廣告

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