VUE v-slot slot

Named Slot

In 2.6.0+ deprecated

Previously, we used to be named slots to customize the template content, for example, a hypothetical <base-layout>template components as follows:

<div class="container">
  <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> 复制代码

When providing content to a named slot, we can a parent component of <template>the use of the element slotcharacteristics:

<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> 复制代码

Or directly on a common element:

<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> 复制代码

The above two examples are rendered in HTML would be:

<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> 复制代码

We can use the v-slotinstructions above to rewrite chestnuts:

<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> 复制代码

It is that simple, the name of the slot by now v-slot:slotNameto use this form.

Tips: no name <slot>implied a "default"name

For example, the above default slot, if you want to show to call it, it can be:

<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> 复制代码

Either way, the above code will output the code below:

<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> 复制代码

Please note that v-slotyou can only add to <template>or custom assemblies, and this is deprecated slot different properties

Scope slot

In 2.6.0+ deprecated

Sometimes, we think of some of the available data access to internal sub-components in the parent assembly. For example, assume there is a template of the following <current-user>components:

<span>
  <slot>{{ user.lastName }}</slot> </span> 复制代码

We may want to use the user's name to replace in the slot inside the last name, so we write:

<current-user>
  {{ user.firstName }}
</current-user>
复制代码

Unfortunately, the above code does not work as you expect, because the current scope of the code is the environment within parent components, so it can not access the <current-user>data inside.

To solve this, we can in the <current-user>internal <slot>dynamic binding one element of userobject attributes:

<span>
  <!-- 完整 v-bind:user 下面是简写形式 -->
  <slot :user="user"> {{ user.lastName }} </slot> </span> 复制代码

Binding to the <slot>property on the element we call slot props . Now, in the parent scope, we can slot-scopeaccess to userdata on:

<current-user>
  <template slot-scope="slotProp"> {{ slotProp.user.firstName }} </template> </current-user> 复制代码

Similarly, we use v-slotrefactoring the code above:

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

Or direct role in <current-user>writing on:

<!-- 省略默认插槽名字 -->
<current-user v-slot="slotProp"> {{ slotProp.user.firstName }} </current-user> <!-- 显示调用默认插槽名字 --> <current-user v-slot:default="slotProp"> {{ slotProp.user.firstName }} </current-user> 复制代码

In this chestnut, we chose slotPropas our slot props name, but you can use any name you like.

A single default abbreviation slot

In the above case, if and only if provides a default slot content, we can use v-slotdirectly on the components:

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

We can simplify the above default slot wording:

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user> 复制代码

Note that the default slot abbreviated syntax can not be mixed with the slot named:

<!-- 控制台将报警告：-->
<!-- To avoid scope ambiguity, the default slot should also use <template> syntax when there are other named slots. -->
<!-- 意思就是说，为了避免作用域模糊 -->
<!-- 当有其他具名插槽时，默认插槽也应当使用 '<template>' 模板语法 -->
<current-user v-slot="slotProps"> {{ slotProps.user.firstName }} <template v-slot:other="otherSlotProps"> slotProps is NOT available here </template> </current-user> 复制代码

Thus, the above code, we rewrite:

<current-user>
 <!-- 两种写法均可 -->
  <!--<template v-slot="slotProps">
    {{ slotProps.user.firstName }}
  </template>-->
  <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> <template v-slot:other="otherSlotProps"> ... </template> </current-user> 复制代码

Deconstruction slot assignment content

Vue in internal code, we pass slotProps is actually a single parameter function:

function (slotProps) {
  // ... slot content ...
}
复制代码

This means v-slotthe value as long as the function parameter definitions JavaScript expressions are acceptable. Therefore, in support of the environment (single file or modern browsers), you can also use the ES2015 deconstructed syntax to extract specific interpolation, for example:

<current-user v-slot="{ user }">
  {{ user.firstName }}
</current-user> 复制代码

More concise code looks right. We can also rename the deconstruction of variables:

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

This gives us a lot of free space operations, you can even customize the fallback content for use in the interpolation undefined circumstances:

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

Dynamic Slot Name

New 2.6.0+

Dynamic instruction argument also applies to v-slot, allows us to define dynamic slot name:

<base-layout>
  <template v-slot:[dynamicSlotName]> ... </template> </base-layout> 复制代码

Slot abbreviated name

New 2.6.0+

And v-onand v-bindthe like, v-slotthere is a short, i.e., use #instead of v-slot. For example, v-slot:headerabbreviated as #header:

<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> 复制代码

And other instructions the same, only in providing parameters to use the short form, the following wording is invalid:

<!-- 将会触发一个控制台警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user> 复制代码

That is, if you want to use shorthand syntax, be sure to specify the name of interpolation:

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

Link: https: //juejin.im/post/5c64e11151882562e4726d98