vue知识点总结 --- slot 插槽

• 插槽

  // 父组件
  <div>
      <item>
          <span>666</span>
      </item>
  </div>
  
  // item子组件
  <div>
      <slot></slot>
  </div>
  
  // 此时<span>标签就会渲染在<slot>标签的位置

• 具名插槽

  // 父组件
  <div>
      <item>
          <span slot="one">666</span>
          <span slot="two">777</span>
      </item>
  </div>
  
  // item子组件
  <div>
      <slot name="one"></slot>
      <slot name="two"></slot>
  </div>
  
  // 此时<span>标签就会分别渲染在对应name的<slot>标签的位置

• 作用于插槽

  // 父组件
  <div>
      <item>
          <span slot-scope="props">{{props.value}}</span>
      </item>
  </div>
  
  // item子组件
  <div>
      <slot value="666"></slot>
  </div>
  
  //