Vue.js中使用插槽將資料從父元件傳遞到子元件

這篇文章要為大家介紹如何使用Vue插槽在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>
   <h2 id="Hello-nbsp-World">Hello World!</h2>
 </Test>

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

<template>
  <div>
    <h2 id="Hello-nbsp-World">Hello World!</h2>
  </div>
</template>

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

示範

如果您從一開始就關注這篇文章，那麼您將在vs程式碼中開啟vue starter專案.為了示範語法部分中的簡單範例，我們的父元件將是app.vue檔案。打開app.vue檔案並在此程式碼區塊中複製：

<template>
  <div id="app">
    <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test>
      <h2 id="Hello-nbsp-World">Hello World!</h2>
    </Test>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test
  }
}
</script>

子元件將成為測試元件，因此請在test.vue檔案中複製下面的程式碼區塊：

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;
}
</script>

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

npm run serve

##命名插槽

Vue允許一個組件有多個插槽，這意味著您可以擁有任意數量的插槽。要測試此功能，請將此新程式碼區塊複製到

test.vue檔案中：

<template>
  <div>
    <slot></slot>
    <slot></slot>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;
}
</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: &#39;Test&#39;
}
</script>

現在，也必須根據要在其中顯示HTML元素的槽名來標記這些HTML元素。將此複製到

app.vue檔案的範本部分：

<template>
  <div id="app">
    <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test>
      <h2 id="Hello-nbsp-world">Hello world!</h2>
      <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>
   <h1 id="Hello-nbsp-world">Hello world!</h1>
</Test>

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

<Test v-slot:header>
   <h1 id="Hello-nbsp-world">Hello world!</h1>
</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: &#39;Test&#39;,
  data(){
    return{
      team:"FC Barcelona"
    }
  }
}
</script>

与普通props一样，v-bind指令用于将数据中的团队与父组件中的prop引用绑定。打开app.vue文件并将下面的代码块复制到模板部分：

<template>
  <div id="app">
    <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test v-slot="{team}">
      <h2 id="Hello-nbsp-world-nbsp-my-nbsp-team-nbsp-is-nbsp-team">Hello world! my team is {{team}}</h2>
    </Test>
  </div>
</template>

如果运行应用程序，您将看到数据对象已成功传递到父组件。

结论

本文向您介绍了vue.js中的插槽，以及它们对内容注入的重要性。您看到了如何设置它，甚至看到了如何为一个组件设置多个插槽。你还看到了狭槽如何通过作用域来充当道具。

英文原文地址：https://blog.logrocket.com/how-to-pass-html-content-through-components-with-vue-slots/

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上是Vue.js中使用插槽將資料從父元件傳遞到子元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！