vue 插槽

vue的插槽

• 什么是插槽？

  插槽可以把父组件中子组件标签内定义的html结构，显示到子组件的任何位置，达到重复利用的效果

• 插槽有那些分类?

  匿名插槽 没有名字的插槽就叫做用匿名插槽

  父组件中定义好子组件标签【双标签】

<son>
     <!-- 匿名插槽 插槽内容 -->
     <input class="form-control" placeholder="请输入列表内容" />
     <button class="btn btn-danger btn-sm">添加内容</button>
</son>

• 子组件中调用匿名插槽的内容 调用匿名插槽

<form >
      <!--标签的调用-->
      <slot />
      <slot />
      <slot />
      <slot />
</form>

• 具名插槽 有名字的插槽就叫做具名插槽 .
  -父组件中定义好子组件标签【双标签】

 <!-- 具名插槽小组件 -->
 <slotName>
      <p>老铁，我是炜具名插槽</p>

      <!-- 文本框 -->
      <div class="form-group" slot="inp">
        <input class="form-control" placeholder="输入搜索的关键字" />
      </div>

      <!-- 下拉菜单 -->
      <div class="form-group" slot="sel">
        <select class="form-control" slot="sel">
          <option>温柔的</option>
          <option>暴力的</option>
          <option>冷暴力的</option>
          <option>热乎的</option>
        </select>
      </div>
      
      <button slot="btn" class="btn btn-danger">搜索</button>
   </slotName>```

 - 子组件中调用具名插槽的内容 <slot name="插槽名字"/> 调用具名插槽。
   

```html
<form class="form form-inline">
          <slot name="inp" />
          &nbsp;&nbsp;
           <slot name="inp" />
          &nbsp;&nbsp;
          <slot name="sel"/>
          &nbsp;&nbsp;
          <slot name="sel"/>
           &nbsp;&nbsp;
          <slot name="btn"/>
 </form>

• 作用域插槽
  • 父组件中通过 slot-scope=‘row’ 接受子组件中slot标签绑定的属性值。

<slot_scope>
      <!-- 接受子组件定义的数据 -->
      <select class="form-control" slot-scope="row">
        <option v-for="(item,index) in row.list" :key="index">{{item}}</option>
      </select>
</slot_scope>

• 子组件中如何定义？ slot标签中绑定数据传递数据

<form class="form form-inline">
       <slot :list="list1"/>&nbsp;&nbsp;
       <slot :list="list2"/>&nbsp;&nbsp;
</form>