本文實(shí)例講述了Vue插槽原理與用法。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)公司專(zhuān)注于長(zhǎng)島企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),電子商務(wù)商城網(wǎng)站建設(shè)。長(zhǎng)島網(wǎng)站建設(shè)公司,為長(zhǎng)島等地區(qū)提供建站服務(wù)。全流程按需求定制制作，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

1 插槽內(nèi)容

Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 基于當(dāng)前的 Web Components 規(guī)范草案，將 <slot> 元素作為承載分發(fā)內(nèi)容的出口。

它允許你像這樣合成組件：

<div id="app1">
  <navigation-link url="/profile">
    Your Profile
  </navigation-link>
</div>

然后你在 <navigation-link> 的模板中可能會(huì)寫(xiě)為：

Vue.component('navigation-link', {
    template: `
      <a
        v-bind:href="url" rel="external nofollow" 
        class="nav-link"
      >
      <slot></slot>
      </a>
    `
  });

當(dāng)組件渲染的時(shí)候，這個(gè) <slot> 元素將會(huì)被替換為“Your Profile”。

插槽內(nèi)可以包含任何模板代碼，包括 HTML：

<navigation-link url="/profile">
 <!-- 添加一個(gè) Font Awesome 圖標(biāo) -->
 <span class="fa fa-user"></span>
 Your Profile
</navigation-link>

甚至其它的組件：

<navigation-link url="/profile">
 <!-- 添加一個(gè)圖標(biāo)的組件 -->
 <font-awesome-icon name="user"></font-awesome-icon>
 Your Profile
</navigation-link>

如果 <navigation-link> 沒(méi)有包含一個(gè) <slot> 元素，則任何傳入它的內(nèi)容都會(huì)被拋棄。

2 具名插槽

有些時(shí)候我們需要多個(gè)插槽。例如，一個(gè)假設(shè)的 <base-layout> 組件多模板如下：

<div class="container">
 <header>
  <!-- 我們希望把頁(yè)頭放這里 -->
 </header>
 <main>
  <!-- 我們希望把主要內(nèi)容放這里 -->
 </main>
 <footer>
  <!-- 我們希望把頁(yè)腳放這里 -->
 </footer>
</div>

對(duì)于這樣的情況，<slot> 元素有一個(gè)特殊的特性：name。這個(gè)特性可以用來(lái)定義額外的插槽：

<div class="container">
 <header>
  <slot name="header"></slot>
 </header>
 <main>
  <slot></slot>
 </main>
 <footer>
  <slot name="footer"></slot>
 </footer>
</div>

在向具名插槽提供內(nèi)容的時(shí)候，我們可以在一個(gè)父組件的 <template> 元素上使用 slot特性：

<base-layout>
 <template slot="header">
  <h2>Here might be a page title</h2>
 </template>
 <p>A paragraph for the main content.</p>
 <p>And another one.</p>
 <template slot="footer">
  <p>Here's some contact info</p>
 </template>
</base-layout>

另一種 slot 特性的用法是直接用在一個(gè)普通的元素上：

<base-layout>
 <h2 slot="header">Here might be a page title</h2>
 <p>A paragraph for the main content.</p>
 <p>And another one.</p>
 <p slot="footer">Here's some contact info</p>
</base-layout>

我們還是可以保留一個(gè)未命名插槽，這個(gè)插槽是默認(rèn)插槽，也就是說(shuō)它會(huì)作為所有未匹配到插槽的內(nèi)容的統(tǒng)一出口。上述兩個(gè)示例渲染出來(lái)的 HTML 都將會(huì)是：

<div class="container">
 <header>
  <h2>Here might be a page title</h2>
 </header>
 <main>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
 </main>
 <footer>
  <p>Here's some contact info</p>
 </footer>
</div>

3 默認(rèn)插槽的內(nèi)容

有的時(shí)候?yàn)椴宀厶峁┠J(rèn)的內(nèi)容是很有用的。例如，一個(gè) <submit-button> 組件可能希望這個(gè)按鈕的默認(rèn)內(nèi)容是“Submit”，但是同時(shí)允許用戶(hù)覆寫(xiě)為“Save”、“Upload”或別的內(nèi)容。

你可以在 <slot> 標(biāo)簽內(nèi)部指定默認(rèn)的內(nèi)容來(lái)做到這一點(diǎn)。

<button type="submit">
 <slot>Submit</slot>
</button>

如果父組件為這個(gè)插槽提供了內(nèi)容，則默認(rèn)的內(nèi)容會(huì)被替換掉。

4 編譯作用域

當(dāng)你想在插槽內(nèi)使用數(shù)據(jù)時(shí)，例如：

<navigation-link url="/profile">
 Logged in as {{ user.name }}
</navigation-link>

該插槽可以訪問(wèn)跟這個(gè)模板的其它地方相同的實(shí)例屬性 (也就是說(shuō)“作用域”是相同的)。但這個(gè)插槽不能訪問(wèn) <navigation-link> 的作用域。例如嘗試訪問(wèn) url 是不會(huì)工作的。牢記一條準(zhǔn)則：

父組件模板的所有東西都會(huì)在父級(jí)作用域內(nèi)編譯；子組件模板的所有東西都會(huì)在子級(jí)作用域內(nèi)編譯。

5 作用域插槽

2.1.0+ 新增

有的時(shí)候你希望提供的組件帶有一個(gè)可從子組件獲取數(shù)據(jù)的可復(fù)用的插槽。例如一個(gè)簡(jiǎn)單的 <todo-list> 組件的模板可能包含了如下代碼：

Vue.component('todo-list',{
    template:`
    <ul>
      <li
        v-for="todo in todos"
        v-bind:key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
    `
  });

但是在我們應(yīng)用的某些部分，我們希望每個(gè)獨(dú)立的待辦項(xiàng)渲染出和 todo.text 不太一樣的東西。這也是作用域插槽的用武之地。

為了讓這個(gè)特性成為可能，你需要做的全部事情就是將待辦項(xiàng)內(nèi)容包裹在一個(gè) <slot> 元素上，然后將所有和其上下文相關(guān)的數(shù)據(jù)傳遞給這個(gè)插槽：在這個(gè)例子中，這個(gè)數(shù)據(jù)是 todo 對(duì)象：

<ul>
 <li
  v-for="todo in todos"
  v-bind:key="todo.id"
 >
  <!-- 我們?yōu)槊總€(gè) todo 準(zhǔn)備了一個(gè)插槽，-->
  <!-- 將 `todo` 對(duì)象作為一個(gè)插槽的 prop 傳入。-->
  <slot v-bind:todo="todo">
   <!-- 回退的內(nèi)容 -->
   {{ todo.text }}
  </slot>
 </li>
</ul>

現(xiàn)在當(dāng)我們使用 <todo-list> 組件的時(shí)候，我們可以選擇為待辦項(xiàng)定義一個(gè)不一樣的<template> 作為替代方案，并且可以通過(guò) slot-scope特性從子組件獲取數(shù)據(jù)：

<todo-list v-bind:todos="todos">
  <!--插槽作用域的名字是 slotProps-->
  <template slot-scope="slotProps">
    <!-- 為指定的待辦項(xiàng)定義一個(gè)模板-->
    <span v-if="slotProps.todo.isComplete">✓</span>
    {{ slotProps.todo.text }}
  </template>
</todo-list>

在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽內(nèi)的任何元素或組件上。

解構(gòu) slot-scope

如果一個(gè) JavaScript 表達(dá)式在一個(gè)函數(shù)定義的參數(shù)位置有效，那么這個(gè)表達(dá)式實(shí)際上就可以被 slot-scope接受。也就是說(shuō)你可以在支持的環(huán)境下 單文件組件或現(xiàn)代瀏覽器)，在這些表達(dá)式中使用 ES2015 解構(gòu)語(yǔ)法。例如：

<todo-list v-bind:todos="todos">
 <template slot-scope="{ todo }">
  <span v-if="todo.isComplete">✓</span>
  {{ todo.text }}
 </template>
</todo-list>

這會(huì)使作用域插槽變得更干凈一些。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

文章題目：Vue插槽原理與用法詳解
分享網(wǎng)址：http://vcdvsql.cn/article26/iiijjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、建站公司、網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)、虛擬主機(jī)、移動(dòng)網(wǎng)站建設(shè)

廣告

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