vue 插槽的版本变化1.x-2.6.0-3.x(详细)

文章目录

• 前言
• 一、具名插槽？
• 二、具名插槽的缩写
• 三、作用域插槽
• 五、总结

---

前言

很多没有注意vue版本更新的同学，看到slot=""的时候是明白的，当看到 <template #>,这时候就有点疑问了，还有vue3插槽到底什么样？；

---

在 2.6.0 中，vue为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。目前 slot 与 slot-scope 这两个特性暂时还未被移除。听说之后的 Vue 3.0 也会使用新语法，这并不是仅写法的不同，还包括了性能的提升，待补充...

具名插槽

// 组件
Vue.component('lv-hello', {
  template: `
    <div>
      <slot name="header"></slot>
      <h1>我的天呀</h1>
    </div>
  `
})

<div id="app">
  <!-- 老版本使用具名插槽 -->
  <lv-hello>
    <p slot="header">我是头部</p>
  </lv-hello>
  <!-- 新版本使用具名插槽 -->
  <lv-hello>
    <!-- 注意：这块的 v-slot 指令只能写在 template 标签上面，而不能放置到 p 标签上 -->
    <template v-slot:header>
      <p>我是头部</p>
    </template>
  </lv-hello>
</div>

具名插槽的缩写

2.6.0之后将 v-slot: 替换成 # 号

<div id="app">
  <lv-hello>
    <template #header>
      <p>我是头部</p>
    </template>
    <!-- 注意: #号后面必须有参数，否则会报错。即便是默认插槽，也需要写成 #default -->
    <template #default>
      <p>我是默认插槽</p>
    </template>
  </lv-hello>
</div>

作用域插槽

所谓作用域插槽，就是让插槽的内容能够访问子组件中才有的数据。

Vue.component('lv-hello', {
  data: function () {
    return {
      firstName: '张',
      lastName: '三'
    }
  },

  template: `
    <div>
      <slot name="header" :firstName="firstName" :lastName="lastName"></slot>
      <h1>我的天呀</h1>
    </div>
  `
})

<div id="app">
  <!-- 老版本使用具名插槽 -->
  <lv-hello>
    <p slot="header" slot-scope="hh">我是头部 {{ hh.firstName }} {{ hh.lastName }}</p>
  </lv-hello>
  <!-- 新版本使用具名插槽 -->
  <lv-hello>
    <!-- 注意：这块的 v-slot 指令只能写在 template 标签上面，而不能放置到 p 标签上 -->
    <template v-slot:header="hh">
      <p>我是头部 {{ hh.firstName }} {{ hh.lastName }}</p>
    </template>
    //简写方式
    <template #header="hh">
      <p>我是头部 {{ hh.firstName }} {{ hh.lastName }}</p>
    </template>
  </lv-hello>
</div>

解构插槽 Prop

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：

function (slotProps) {
  // ... 插槽内容 ...
}

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：

<todo-list v-slot="{ item }">
  <i class="fas fa-check"></i>
  <span class="green">{{ item }}</span>
</todo-list>

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 item 重命名为 todo：

<todo-list v-slot="{ item: todo }">
  <i class="fas fa-check"></i>
  <span class="green">{{ todo }}</span>
</todo-list>

你甚至可以定义备用内容，用于插槽 prop 是 undefined 的情形：

<todo-list v-slot="{ item = 'Placeholder' }">
  <i class="fas fa-check"></i>
  <span class="green">{{ item }}</span>
</todo-list>

动态插槽名称

2.6.0+ 新增

动态指令参数 也适用于 v-slot ，允许我们定义动态插槽名称：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>
//dynamicSlotName 可以是变量

注意点

和其他指令一样，只有在提供参数时才能使用简写形式，下面的写法是无效的：

<!-- 将会触发一个控制台警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

也就是说，如果你想使用简写语法，则务必指定插值的名字：

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

---

总结

目前说VUE3会有新的语法，不过好像边动也不大，可能是底层有重写，性能有提升了，后面有新的认知再补充给一下