Simple and concise use of slot slots in vue

1. Anonymous slot-no name identification required

The slot is defined in the sub-component:

  <div class="nav-title">
     <!-- <slot>有默认值</slot> -->
      <!-- 没有默认值 -->
     <slot></slot>
  </div>

Explain: If the parent component has a value passed over, the value of the parent component is used; if not, the default value set in the child component is used by default, and the default value can be empty.

Assignment and transfer in the parent component:

   <backNav>
      <slot>修改密码</slot>
   </backNav>

2. Named slot-requires name identification

The slot is defined in the sub-component:

  <div class="nav-title">
  		<slot name="btn-title"></slot>
  </div>

Assignment and transfer in the parent component:

   <backNav>
       <span slot="btn-title">申请信息详情</span>
   </backNav>

Pay attention to the comparison of the name and slot values ​​and positions in the child component and the parent component

In this way, a complete slot is over.