Vue组件深入理解--插槽

插槽

插槽相当于占位符，用<slot></slot>表示；用于父组件填充子组件的信息；

1、 插槽的基本使用

• 先定义一个子组件<navigation-link>，内包含占位符<slot>

  <a v-bind:href=“url”
    class=“nav-link”>
    <slot></slot>
  </a>
  

• 定义父组件html

  <navigation-link url="/profile">
    Your Profile
  </navigation-link>
  

• 当组件渲染的时候，父组件标签内的模板内容会替换子组件<slot></slot> ， 即“Your Profile”会渲染到<slot></slot>的位置

  <navigation-link url="/profile">
    <!-- 添加一个 Font Awesome 图标 -->
    <span class="fa fa-user"></span>
    Your Profile   
  </navigation-link>
  

2、 具名插槽

• 给slot绑定一个name属性

  <header>
      <slot name=“header”></slot>
    </header
  

• 使用v-slot:[name] , 也可以简写为#name

  <template v-slot:header>
      <h1>Here might be a page title</h1>
    </template>
    //可缩写为：
    <template #header>
      <h1>Here might be a page title</h1>
    </template>
  

• 非具名插槽的写法：

  <!-- 这样会触发一个警告 -->
  <current-user #="{ user }">
    {{ user.firstName }}
  </current-user>
  <!-- 正确写法：非具名插槽会视为默认插槽 -->
  <current-user #default="{ user }">
    {{ user.firstName }}
  </current-user>
  

3、 后备内容

在<slot></slot>中间填充内容，则挡传入的slot中不存在时，则会使用使用填好的内容。

<button type="submit">
  <slot>Submit</slot>
</button>

4、 作用域插槽

父级组件模板不能编译子组件的变量，因此需要值传递。

• 定义一个子组件插槽<current-user> 使用属性绑定需要访问的值

  <span>
    <slot v-bind:user="user">
      {{ user.lastName }}
    </slot>
  </span
  

• 绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

  <current-user>
    <template v-slot:default="slotProps">  //slotProps为自定义的
      {{ slotProps.user.firstName }}   
    </template>
  </current-user>
  

5、 总结

插槽有点类似于父子组件传值，但传的不是值，而是传进去复用的模板；实际业务场景中使用插槽可能并不多，可能用在UI组件的封装会相对比较灵活；还有就是用在模板部分重复的情况，比如弹框展示不同的内容，或者是多个模板类似但又不相同的组件，比如说根据不同的场景需要展示不同的UI内容，但js逻辑相对简单或者类似，当你考虑将组件写成一个公共的组件，其实是比较麻烦的，需要写多个v-if定义模板，这个时候插槽来解决了。