Vue學習筆記-深入組件(插槽slot)

在 2.6.0 中，我們為具名插槽和作用域插槽引入了一個新的統一的語法 (即 v-slot 指令)。

它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱這份 RFC。

 

插槽內容:文字,html片段，其他組件，如果沒有<slot> 插槽，那么其中的任何內容都會被扔掉

<navigation-link>//組件內容

<a v-bind:href="url" class="nav-link" > <slot></slot> </a>

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

這樣渲染成

 

//其他任何模板代碼

<navigation-link url="/profile">
  <!-- 添加一個 Font Awesome 圖標 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

<a url="/profile" class="nav-link" > 

<span class="fa fa-user"></span>

  Your Profile

 </a>

 

編譯作用域:本頁面的作用域，不能訪問navigation-link內部作用域

父級模板里的所有內容都是在父級作用域中編譯的；

子模板里的所有內容都是在子作用域中編譯的。

<navigation-link url="/profile">
  Logged in as {{ user.name }} //user 指向本頁面作用域
</navigation-link>

后備內容:組件默認數據，你不傳給我東西，我就展示自己數據！

有時為一個插槽設置具體的后備 (也就是默認的) 內容是很有用的，它只會在沒有提供內容的時候被渲染。組件插槽

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

 

具名插槽：<slot name="name"></slot>

<base-layout>組件

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

1:一個不帶 name 的 <slot> 出口會帶有隱含的名字“default”。
2:在向具名插槽提供內容，用template v-slot 
3：注意 v-slot 只能添加在一個 <template> 上

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

 

作用域插槽：讓插槽內容能夠訪問子組件中才有的數據 

有時讓插槽內容能夠訪問子組件中才有的數據是很有用的

只有 <current-user> 組件內可以訪問到 user 而我們提供的內容是在父級渲染的。

 

綁定在 <slot> 元素上的特性被稱為插槽 prop。現在在父級作用域中，我們可以給 v-slot 帶一個值來定義我們提供的插槽 prop 的名字：

 

 

 

獨占默認插槽的縮寫語法:

這種寫法還可以更簡單。就像假定未指明的內容對應默認插槽一樣，不帶參數的 v-slot 被假定對應默認插槽

注意默認插槽的縮寫語法不能和具名插槽混用，因為它會導致作用域不明確：

<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

 

出現多個插槽，請為所有插槽使用完這個的template語法
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>

 

解構插槽 Prop：作用域插槽組件數據傳遞出來,內部工作原理是將你的插槽內容包括在一個傳入單個參數的函數里

這個地方看得有點蒙圈！

function (slotProps) {
  // 插槽內容
}

動態插槽名：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

 

具名插槽的縮寫：v-slot:header  縮寫為#header,必須有name 

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

該縮寫只在其有參數的時候才可用。這意味着以下語法是無效的

<!-- 這樣會觸發一個警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>