VueJS slot in the slot

VueJSThe slotslot is defined components can not get the syntax and grammar is very important, this article will introduce VueJSthe slotstudy notes.

In the Vue2.6.0 version, Vuethe team was named the slot and scope slots introduced a new unified grammar ( v-slot) command. It replaces slotand slot-scope, but not removed the old syntax

Slot Content

VueImplements a set of content distribution API, this APIdesign inspiration from the Web Componentsdraft specification, the <slot>element as exit load distribution of content.

// slot-comp 为自定义组件
// 定义
<template>
  <div>
    <slot></slot>
  </div>
</template>
// 使用
<slot-comp>
      slot content
</slot-comp>
<slot-comp>
      <h1>slot content</h1>
</slot-comp>

When the component rendering time, <slot></slot>will be replaced slot content. Slots which can contain any code (including the HTML), if <slot-comp>not contain <slot>the element, then anything between the start tag and an end tag assembly is discarded.
Operating results :

Compile Scope

When you want to use data in a slot, for example:

<slot-comp>
      slot content
      {{ slotProps.msg }}
</slot-comp>

The rest of the slots with the same template can access the same instance property, and can not access <slot-comp>the scope. E.g:

<slot-comp msg="msg">
      slot content
      {{ msg }} //undefined
</slot-comp>

Note: A parent template compilation of all content is in the parent scope, word template all the contents are compiled in sub-scope

Back Content

Sometimes a slot set a specific reserve for the content (which is the default content) is useful, he will only be rendered in the absence of prompt content.

// 定义
<template>
  <div>
    <slot>默认内容</slot>
  </div>
</template>
//使用
<slot-comp>
</slot-comp>
<slot-comp>
	自己定义的内容
</slot-comp>

Operating results :

Named Slot

Sometimes we need more slots, then you need to use named slots to achieve. <slot>There is a special element attribute：name. This attribute can be used to define additional slots.

    <slot-comp name="icon">
    	//  <p>default</p> 与下面相等
    	// 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
      <p name="default">default</p>
      <p name="icon">icon</p>
    </slot-comp>

When providing content to a named slot, we can one templateuse the element of v-slotinstruction, and to v-slotprovide the name of the formal parameter:

// 定义
<template>
  <div>
    <slot name="icon"></slot>
  </div>
</template>
// 使用
     <slot-comp>
      <template v-slot:icon>
        <p>icon</p>
      </template>
    </slot-comp>

operation result:

Now templateall the content elements will be passed in the corresponding slot. Not wrapped in with any v-slotof templatebe considered a default slot content in the content will be.
Note: v-slotYou can only add in <template>the

Scope slot

Sometimes leaving the socket to access the contents of subassemblies only data is useful. Binding <slot>on the element attributeis called the slot prop.

// 定义
<template>
  <div>
    <slot :iconName="iconName">默认内容</slot>
    <slot name="icon" :iconName="iconName"></slot>
  </div>
</template>

<script>
export default {
  name: 'SlotComp',
  data () {
    return {
      iconName: 'home'
    }
  }
}
</script>
// 使用
    <slot-comp>
      <template v-slot:default="slotProps">
        <p>default-->{{ slotProps.iconName }}</p>
      </template>
      <template v-slot:icon="slotProps">
        <p>icon-->{{ slotProps.iconName }}</p>
      </template>
    </slot-comp>

Operating results :