Vue.js slot slot

1. Personal understanding of slots

The reason for using assembly, because components can be complex pages into multiple parts, each part is a component (also a vue file). To use this component, you only need to introduce the component files and writes to the component tag in the template, the introduction of this sub-assembly is equivalent to the introduction of the html template components, such as:

// App.vue
<template>
    <div id="app">
        <Child />
    </div>
</template>

// Child组件
<template>
    <div id="child">
        <h2>我是Child组件</h2>
    </div>
</template>

After rendering is

<div id="app">
   <div id="child">
      <h2>我是Child组件</h2>
   </div>
</div>

Want to insert data into the parent component subassembly, nothing more than the binding properties of the form data, received by the sub-assembly and props. However, this method can only be used to transfer some plain data (objects and arrays), can not be transferred to the sub-assembly section of html code, for this slot is born

2.slot basic usage

In native html, we often inserted in a block of n-level tag label, Vue parent tag assembly to the subassembly into such an approach is

// App.vue
<template>
  <div id="app">
    <Child>
      <!-- 在子组件中插入标签 -->
      <h2>我是插入的h2</h2>
    </Child>
  </div>
</template>

To the parent component subassembly inserted (passed) html tag section, a sub-assembly needs to receive the location, the position of the sub-slot is the tag component. Tag is the slot position label inserted position

// 子组件
<template>
    <div id="child">
<!-- slot标签将被插入的标签替代 -->
        <slot></slot>
        <h2>我是Hello组件</h2>
    </div>
</template>

Rendering results:

<div id="app">
    <div id="child">
        <h2>我是插入的h2</h2>
        <h2>我是Child组件</h2> 
    </div>
</div>

Such a slot, the slot is called anonymous.

3 Named Slot

If there are a plurality of slots subassembly, it is necessary to add an identifier for each slot, i.e., the name property, easy condemnation

<template>
    <div id="child">
        <slot name="top"></slot>
        <h2>我是Child组件</h2>
        <slot name="bottom"></slot>
    </div>
</template>

When the parent tag assembly is inserted through slot setting properties, name of the attribute value comparison slot, slots corresponding to the associated

<template>
  <div id="app">
    <Child>
      <!-- 在子组件中插入标签 -->
      <h2 slot="top">我是插入的h2</h2>
      <h5 slot="bottom">我是插入的h5</h5>
    </Child>
  </div>
</template>

Rendering results:

<div id="app">
    <div id="child">
        <h2>我是插入的h2</h2>
        <h2>我是Child组件</h2> 
        <h5>我是插入的h5</h5>
    </div>
</div>

PS: empty slots can not, the parent element tag assembly is not inserted, the slot will not be rendered, some space can use this feature to control whether the display sub-assembly elements corresponding
slots and transmission parameters props can be used simultaneously, the two do not conflict

4. The default content slots

Html code can be written within the slot label, if the slot has not been replaced, html content displayed within the slot, and vice versa will be replaced

<template>
    <div id="child">
        <slot name="top">
          <p>我是top插槽没使用的时候展示的内容</p>
        </slot>
        <h2>我是Child组件</h2>
        <slot name="bottom"></slot>
    </div>
</template>

// App.vue
<template>
  <div id="app">
    <Child>
      <h5 slot="bottom">我是插入的h5</h5>
    </Child>
  </div>
</template>

Rendering results: name = "top" slot displays the default content

<div id="app">
    <div id="child">
        <p>我是top插槽没使用的时候展示的内容</p> 
        <h2>我是Child组件</h2>
        <h5>我是插入的h5</h5>
    </div>
</div>

5.slot-scope (Scope slots) bound label data slot

The props This function is similar to the reverse, by the sub-assembly in the form of binding properties to bind to the corresponding slot label data, when the parent tag assembly to be inserted to replace the slot, it can be read in the slot label bound The data

// 子组件
<template>
    <div id="child">
 <!-- 在slot标签中2个数据 -->
        <slot name="top" :p1="p1" :p2="p2">
        </slot>
        <h2>我是Hello组件</h2>
        <slot name="bottom"></slot>
    </div>
</template>

<script>
export default {
  data () {
    return {
      p1: {name: '乔治',age: 4},
      p2 :{name: '佩琪',age: 8}
    }
  }
}
</script>

Parent component added slot-scope attribute Tags alternate slot, slot of the current data represents a binding acceptance. slot-scope values can be free to write, for example, slot-scope = "xxx"
because the labels may be bound to a plurality of slot data, all data are vue wrapped within an object, the object property name can be access the corresponding data.

// App.vue
<template>
  <div id="app">
    <Hello>
      <template slot-scope="xxx" slot="top">
        <p>{{xxx.p1.name}}</p>
        <p>{{xxx.p1.age}}岁</p>
        <p>{{xxx.p2.name}}</p>
        <p>{{xxx.p2.age}}岁</p>
      </template>
      <h5 slot="bottom">我是插入的h5</h5>
    </Hello>
  </div>
</template>

xxx.p1.name => George
xxx.p1.age =>. 4
xxx.p2.name => Paige
xxx.p2.age => 8