webpack study notes - depth components (slot slot)

In 2.6.0, we as a slot named slot and scope introduces a new unified grammar (ie,  v-slot instructions).

It replaces  slot and  slot-scope both have now been abandoned but not removed and is still in the document properties. The origin of this new syntax can be found at  RFC .

 

Slot content: text, html fragments, other components , if not <slot> slot, then any contents therein will be thrown away

<navigation-link>//组件内容

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

<Navigation Link-URL = " / Profile " > 
  Your Profile <br>
 </ Navigation-Link> 

so rendered

 

// any other template code
 
<Navigation-Link url = " / Profile " > 
  <-! Add a Font Awesome icon -> 
  <span class = " FA FA-the User " > </ span> 
  Your Profile
 </ navigation- link>

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

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

  Your Profile

 </a>

 

Compile Scope: The scope of this page, you can not access the navigation-link inner scope

Parent template of all content is the role of the parent in the domain compilation;

The contents of all sub-templates are compiled in the child scope.

<Navigation Link-URL = " / Profile " > 
  Logged in  AS {{}} // User point the user.name page scope of the present
 </ navigation-link>

Fallback content: Component default data, you do not pass me something, I will show their data!

Sometimes a slot set a specific reserve is (that is, the default) content is useful, it will only be rendered at the time did not provide content. Socket assembly

 <Button type = " Submit " > 
  <slot> the Submit </ slot> 
</ Button>

 

Slot named: < slot name = "name"> </ slot>

< Base -layout> component

 <div class = " Container " > 
  <header> 
    <-! We want to put a header here -> 
  </ header> 
  <main> 
    <-! We want to put the main content here - -> 
  </ main> 
  <footer> 
    ! <- we want to put the footer here -> 
  </ footer> 
</ div> 

1: a without  name the  <slot> export will be hidden with the name "default". 
2: In the anonymous sockets provide content, with v-slot Template 
3: Note that  v-slot you can only add one  <template> on

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

 

Scope Slot: Let slot content to access data sub-assembly only 

Sometimes leaving the socket to access the contents of data sub-assemblies is only useful

Only  <current-user> within the component can access  user and content we provide is in the parent rendering.

 

Binding  <slot> on the element characteristic is called slot prop. Now in the parent scope, we can give  v-slot with a value to define the name of the slot prop we offer:

 

 

 

Exclusive default slots abbreviated syntax:

Such an approach can also be easier. Like assume unspecified content corresponding slot as the default, with no arguments  v-slot is assumed to correspond to the default slot

Note that the default slot abbreviated syntax can not be named, and slot mix, because it can lead to ambiguous scope:

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