slot

Halaman ini menganggap anda telah membaca Asas Komponen. Jika anda masih belum tahu banyak tentang komponen, saya syorkan anda membacanya terlebih dahulu.

Dalam 2.6.0, kami memperkenalkan sintaks bersatu baharu untuk slot dinamakan dan slot berskop (arahan v-slot). Ia menggantikan slot dan slot-scope yang pada masa ini ditamatkan tetapi tidak dialih keluar dan masih Ciri v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅这份 RFC。

目录

• 插槽内容

• 编译作用域

• 后备内容

• 具名插槽

• 作用域插槽

  • 独占默认插槽的缩写语法

  • 解构插槽 Prop

• 动态插槽名

• 具名插槽的缩写

• 其它示例

• 废弃了的语法

  • 带有 slot 特性的具名插槽

  • 带有 slot-scope 特性的作用域插槽

插槽内容

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

它允许你像这样合成组件：

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

然后你在 <navigation-link> 的模板中可能会写为：

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

当组件渲染的时候，<slot></slot> dalam dokumen. Asal sintaks baharu boleh didapati dalam RFC

< li> 🎜Kandungan slot🎜🎜
• 🎜Kompilasi skop 🎜 🎜
• 🎜Kandungan sandaran🎜🎜
• 🎜Slot bernama🎜🎜
• 🎜Slot skop🎜🎜
  • 🎜Sintaks singkatan untuk slot lalai eksklusif 🎜🎜
  • 🎜Prop slot dinyahbina🎜🎜
• 🎜Nama slot dinamik 🎜🎜
• 🎜Singkatan untuk slot bernama 🎜🎜
• 🎜Contoh lain 🎜🎜
• 🎜Sintaks ditamatkan🎜🎜
  • 🎜Slot dinamakan dengan ciri slot🎜🎜
  • 🎜Slot skop dengan skop slot atribut🎜🎜

<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

<navigation-link url="/profile">
  <!-- 添加一个图标的组件 -->
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

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

<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}
  <!--
  这里的 `url` 会是 undefined，因为 "/profile" 是
  _传递给_ <navigation-link> 的而不是
  在 <navigation-link> 组件*内部*定义的。
  -->
</navigation-link>

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

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

<submit-button></submit-button>

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

<submit-button>
  Save
</submit-button>

<button type="submit">
  Save
</button>

自 2.6.0 起有所更新。已废弃的使用 slot 特性的语法在这里。

有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件：

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

对于这样的情况，<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：

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

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

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

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template>

Kompilasi skop

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

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </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>

🎜Semua dalam templat induk disusun dalam skop induk; semua dalam templat anak Kandungan disusun dalam skop anak. 🎜

Kandungan sandaran

<span>
  <slot>{{ user.lastName }}</slot>
</span>

<current-user>
  {{ user.firstName }}
</current-user>

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

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

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

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

Slot bernama

---

🎜Dikemas kini sejak 2.6.0. Sintaks yang ditamatkan untuk menggunakan atribut slot ditemui di sini< / a>. 🎜

🎜Kadangkala kita memerlukan berbilang slot. Contohnya, untuk komponen <base-layout> dengan templat berikut: 🎜

<!-- 无效，会导致警告 -->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
  <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
  </template>
</current-user>

🎜Untuk kes sedemikian, elemen <slot> mempunyai atribut khas: < kod>nama. Ciri ini boleh digunakan untuk mentakrifkan slot tambahan: 🎜

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

🎜Saluran <slot> tanpa nama akan mempunyai nama tersirat "lalai". 🎜🎜Apabila menyediakan kandungan pada slot bernama, kami boleh menggunakan arahan v-slot pada elemen <template> dan mengakhirinya dengan v-slot < Parameter /code> diberi namanya dalam bentuk: 🎜

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

🎜Sekarang semua dalam elemen <template> akan dihantar ke slot yang sepadan. Sebarang kandungan yang tidak dibungkus dalam <template> dengan v-slot akan dianggap sebagai kandungan slot lalai. 🎜

Walau bagaimanapun, jika anda ingin menjadi lebih jelas, anda masih boleh membungkus kandungan slot lalai dalam <template>: <template> 中包裹默认插槽的内容：

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

任何一种写法都会渲染出：

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

注意： v-slot 只能添加在一个 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot 特性不同。

作用域插槽

---

自 2.6.0 起有所更新。已废弃的使用 slot-scope 特性的语法在这里。

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 <current-user> 组件：

<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

我们想让它的后备内容显示用户的名，以取代正常情况下用户的姓，如下：

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

然而上述代码不会正常工作，因为只有 <current-user> 组件可以访问到 user 而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个特性绑定上去：

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

绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字：

<!-- 这样会触发一个警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

独占默认插槽的缩写语法

在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

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

这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    <!--
    我们为每个 todo 准备了一个插槽，
    将 `todo` 对象作为一个插槽的 prop 传入。
    -->
    <slot name="todo" v-bind:todo="todo">
      <!-- 后备内容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template>

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

Mana-mana cara akan menyebabkan:

<base-layout>
  <template 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 slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

Nota: < kod >v-slot hanya boleh ditambahkan pada <template> (hanya pengecualian), ini dan slot ciriadalah berbeza.

Slot skop

Sejak 2.6.0 Dikemas kini sejak kemudian. Sintaks yang ditamatkan untuk menggunakan atribut slot-scope ditemui di sini .

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

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </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>

<slot-example>
  <template slot="default" slot-scope="slotProps">
    {{ slotProps.msg }}
  </template>
</slot-example>

<slot-example>
  <template slot-scope="slotProps">
    {{ slotProps.msg }}
  </template>
</slot-example>

🎜🎜Sintaks singkatan untuk slot lalai eksklusif🎜🎜🎜🎜Dalam kes di atas, apabila kandungan yang disediakan hanya mempunyai slot lalai, label komponen boleh digunakan sebagai Gunakannya sebagai templat untuk slot. Dengan cara ini, kita boleh menggunakan v-slot terus pada komponen: 🎜

<slot-example>
  <span slot-scope="slotProps">
    {{ slotProps.msg }}
  </span>
</slot-example>

<slot-example>
  <span slot-scope="{ msg }">
    {{ msg }}
  </span>
</slot-example>

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