阅读 11200

让你的组件千变万化,Vue slot 剖玄析微

原创不易,希望能关注下我们,再顺手点个赞~~

本文首发于政采云前端团队博客: 让你的组件千变万化,Vue slot 剖玄析微

季节.png

(一)前言

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

看了上面这句官方解释,可能一样不知道 slot 指的是什么,那么就来看看在 Vue 中,什么时候你需要用到 slot 。

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

(二)v-slot 用法

在 2.6.0 版本中,Vue 为具名插槽和作用域插槽引入了一个新的统一的语法 (即 <v-slot> 指令)。它取代了 slotslot-scope 这两个目前已被废弃、尚未移除,仍在文档中的特性。

使用方法可以分为三类:默认插槽具名插槽以及作用域插槽

◎ 默认插槽

子组件编写:在组件中添加 <slot> 元素,来确定渲染的位置。

  // 子组件
  <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-slotname 后只会加载最后一个定义的插槽内容。

  • 当子组件只有默认插槽时,才可以使用独占默认插槽的缩写语法,只要出现多个插槽,必须使用完整的基于 template 的语法。

(三)slot 以及 slot-scope 的用法

介绍完 v-slot 的基本用法,这里我们也顺带介绍一下之前的 slotslot-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

推荐阅读

可能是最全的 “文本溢出截断省略” 方案合集

前端工程实践之可视化搭建系统(一)

自动化 Web 性能优化分析方案

关注下面的标签,发现更多相似文章
评论