让你的组件变幻无穷，Vue slot 剖玄析微

时间 2019-11-16

标签让你组件变幻无穷 vue slot 繁體版

原文原文链接

原创不易，但愿能关注下咱们，再顺手点个赞~~

本文首发于政采云前端团队博客：让你的组件变幻无穷，Vue slot 剖玄析微html

（一）前言

Vue 代码中的 slot 是什么，简单来讲就是插槽。 <slot> 元素做为组件模板之中的内容分发插槽，传入内容后 <slot> 元素自身将被替换。前端

看了上面这句官方解释，可能同样不知道 slot 指的是什么，那么就来看看在 Vue 中，何时你须要用到 slot 。vue

举例：一个组件的展现层你须要作到大致结构固定，但其内的部分结构可变，样式表现不固定。例如 Button 中是否显示 icon ，或者 Modal 框的中间内容展现区域的变化等，要经过子组件本身实现是不可能的。组件并不直接支持 HTML DOM 结构的传递，此时就能够经过使用 slot 做为 HTML 结构的传递入口来解决问题。性能优化

（二）v-slot 用法

在 2.6.0 版本中，Vue 为具名插槽和做用域插槽引入了一个新的统一的语法（即 <v-slot> 指令）。它取代了 slot 和 slot-scope 这两个目前已被废弃、还没有移除，仍在文档中的特性。ide

使用方法能够分为三类：默认插槽、具名插槽以及做用域插槽。函数

◎ 默认插槽

子组件编写：在组件中添加 <slot> 元素，来肯定渲染的位置。post

// 子组件
  <template>
    <div class="content">
      <!-- 默认插槽 -->
      <header class="text">
        <!-- slot 的后备内容：为一个插槽设置具体后备（默认）内容是颇有用的，当父组件不添加任何插槽内容时，默认渲染该后备内容的值。 -->
        <slot>默认值</slot>
      </header>
    </div>
  </template>
复制代码

父组件编写：任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。当子组件只有默认插槽时， <v-slot> 标签能够直接用在组件上，也就是独占默认插槽的写法性能

// 父组件
  <template>
    <div class="container">
      <!-- 默认插槽-->
      <child>
        任意内容
        <template>内容</template>
        中间内容
        <!-- <template v-slot:default>但若是你定义了 default 以后，其余内容就不会出现了，原理同上，不能重复定义</template> -->
      </child>
    
      <!-- 独占默认插槽的缩写 -->
      <child v-slot="slotProps">
        当只有默认插槽时，此为独占默认插槽的缩写<br>
        若是组件中有其余具名插槽，这么写会报错<br>
        slotProps 取的是，子组件标签 slot 上属性数据的集合
      </child>
    </div>
  </template>
复制代码

渲染结果测试

◎ 具名插槽

子组件编写：当须要使用多个插槽时，为 <slot> 元素添加 name 属性，来区分不一样的插槽，当不填写 name 时，默认为 default 默认插槽。优化

// 子组件
  <template>
    <div class="content">
      <!-- 具名插槽 -->
      <main class="text">
        <slot name="main"></slot>
      </main>
      <footer class="text">
        <slot name="footer"></slot>
      </footer>
    </div>
  </template>
复制代码

父组件编写：<template> 标签中添加 v-slot:xxx 或者 #xxx 属性的内容， # 表明插槽的缩写。

// 父组件
  <template>
    <div class="container">
      <!-- 具名插槽使用 -->
      <child>
        <template v-slot:main>
          <a href="https://www.zcygov.cn" target="_blank">导航</a>
        </template>
        <template #footer>页脚（具名插槽的缩写#）</template>
        <template #footer>
          <!--  v-slot 重复定义一样的 name 后只会加载最后一个定义的插槽内容 -->
          v-slot只会添加在一个 template 上面
        </template>
      </child>
    </div>
  </template>
复制代码

渲染结果

◎ 做用域插槽

子组件编写：有时让父组件能访问到子组件中的数据是颇有用的，咱们能够将绑定在 <slot> 元素上的特性称为插槽 Prop ，固然也能够传递一些 Function。

// 子组件
  <template>
    <div class="content">
      <!-- 做用域插槽 -->
      <footer class="text">
        <slot name="footer" :user="user" :testClick="testClick">
          {{user.name}}
        </slot>
      </footer>
    </div>
  </template>
  
  <script>
  export default {
    name: 'child',
    data () {
      return {
        user: {
          title: '测试title',
          name: '测试name'
        }
      };
    },
    methods:{
      testClick(){
      	// 子组件通用方法，可传递给父组件复用
        alert('123');
      }
    }
  };
  </script>
复制代码

父组件编写：被绑定的属性的集合对象，在父元素中会被 v-slot:xxx="slotProps" 或者 #xxx="slotProps" 接收，xxx 表明具名插槽的 name ，slotProps 为子组件传递的数据对象，能够重命名。

// 父组件
  <template>
    <div class="container">
      <!-- 做用域插槽，以及解构插槽 Prop 的写法 -->
      <child>
        <template #footer="slotProps">
          {{slotProps.user.title}}
          <button @click="slotProps.testClick">点我</button>
        </template>
        <template #footer="{user,testClick}">
          {{user.title}}<br>
          此为解构插槽prop<br>
          <!-- 子组件中的通用方法，可传递给父组件复用 -->
          <button @click="testClick">点我</button>
        </template>
      </child>
    </div>
  </template>

  <script>
  import Child from './component/child.vue';
  export default {
    name: 'demo',
    components: {
      Child
    },
  };
  </script>
复制代码

渲染结果

◎ 其余拓展

解构插槽 prop 能够重命名，例如：v-slot="{ user: person }" 将 user 对象重命名为 person 使用。
解构插槽 prop 能够赋值默认值，例如：v-slot="{ user = { name: 'Guest' } }" 给属性添加自定义后备内容。
动态插槽命名，例如：v-slot:[dynamicSlotName] ，支持命名变量定义。

◎ 注意事项

v-slot 只能用在 template 上面，或者是独占默认插槽的写法。
父组件引用时，重复定义了 v-slot 的 name 后只会加载最后一个定义的插槽内容。
当子组件只有默认插槽时，才可使用独占默认插槽的缩写语法，只要出现多个插槽，必须使用完整的基于 template 的语法。

（三）slot 以及 slot-scope 的用法

介绍完 v-slot 的基本用法，这里咱们也顺带介绍一下以前的 slot 和 slot-scope 的用法以及区别。

◎ 子组件编写

子组件的编写方式没什么区别，下面是一个集合

// 子组件
  <template>
    <div class="content">
      <!-- 默认插槽 -->
      <header class="text">
        <slot>默认值</slot>
      </header>
      
      <!-- 具名插槽 -->
      <main class="text">
        <slot name="main"></slot>
      </main>
      
      <!-- 做用域插槽 -->
      <footer class="text">
        <slot name="footer" :user="user" :testClick="testClick">
          {{user.name}}
        </slot>
      </footer>
    </div>
  </template>
  
  <script>
  export default {
    name: 'child',
    data () {
      return {
        user: {
          title: '测试title',
          name: '测试name'
        }
      };
    }
  };
  </script>
复制代码

◎ 父组件编写

具名插槽：直接使用 slot 属性，传值为子组件插槽的 name 属性。
做用域插槽：经过 slot-scope 属性来接受子组件传入的属性集合，其余用法一致。

// 父组件
 <template>
   <div class="container">
     <child>
       <!-- 默认插槽 -->
       <div>默认插槽</div> 
      
       <!-- 具名插槽 -->
       <div slot="main">具名插槽</div>
       <div slot="main">具名插槽2</div>
      
       <!-- 做用域插槽 -->
       <div slot="footer" slot-scope="slotProps">
         {{slotProps.user.title}}
       </div>
     </child>
   </div>
 </template>

 <script>
 import Child from './component/child.vue';
 export default {
   name: 'demo',
   components: {
     Child
   },
 };
 </script>
复制代码

最终渲染

◎ 须要注意

不一样于 v-slot 的是，slot 中同名能够重复定义屡次。
slot 能够直接定义在子组件上。
v3.0 版本后不可以使用 slot ，建议直接使用 v-slot 。

（四）总结

插槽的 <slot> 的可复用特性，能够用来写一些组件结构固定，内容可替换的组件，例如表格，列表，按钮，弹窗等内容。
插槽能够传递属性值或者 function 的特性，能够在子组件中写一些通用的函数，例如通用的报错提示等，传递给父组件复用。

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 50 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在平常的业务对接以外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推进并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

若是你想改变一直被事折腾，但愿开始能折腾事；若是你想改变一直被告诫须要多些想法，却无从破局；若是你想改变你有能力去作成那个结果，却不须要你；若是你想改变你想作成的事须要一个团队去支撑，但没你带人的位置；若是你想改变既定的节奏，将会是“ 5 年工做时间 3 年工做经验”；若是你想改变原本悟性不错，但老是有那一层窗户纸的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程，亲手推进一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我以为咱们该聊聊。任什么时候间，等着你写点什么，发给 ZooTeam@cai-inc.com